1.选择器-基本:基本
#id
element
.class
*
selector1,selector2,selectorN
2.基本示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择符:基本</title>
<script src="../jquery-2.2.4.js"></script>
<script>
//所有的jquery代码都要写在以下两种形式中的任何一种
// $ 等价于jQuery()函数,即jQuery()函数的别名
// 1. $(document).ready(function () { ... });
// 2. $(function(){ .... });
// ready指的是一个事件类型
// 一个html文档在浏览器中呈现分成两个步骤:
// 1. 在浏览器内存中构建出DOM树,此阶段即ready事件阶段,这时在浏览器上还看不见元素
// 2. 将DOM树显示出来
$(document).ready(function () {
// 这里得到的是一个被jquery包装过的jquery对象,而不是一个原生的DOM对象
var h2 = $('h2');
// 有两种方式可从jquery对象中获得原生的DOM对象:
// 1. jqueryObejct[index]
// 2. jqueryObject.get(index);
console.log(h2[0]);
console.log(h2.get(0));
});
// ready的简写形式
$(function () {
var arr = $('p');
console.log(arr[0]);
console.log(arr.get(1));
$(':button').click(function () {
// alert('click button');
// 给ID为foo的元素加上行内样式
$('#foo').css({color:"red"});
$('.paragraph1').css({color:"blue",'font-size':'18px'});
$('.paragraph1,.paragraph2').css({color:"red",'font-size':'18px'});
});
});
</script>
</head>
<body>
<h3 style="margin-left: 30px"><a href="../index.html">返 回</a></h3>
<h1>jQuery 子元素选择器:</h1>
<h3>选择器-基本:基本
#id
element
.class
*
selector1,selector2,selectorN
</h3>
<h2 id="foo">This is a heading</h2>
<p class="paragraph1">This is a paragraph.</p>
<p class="paragraph2">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
3.示例结果