这是《jQuery入门教程笔记》系列3，在第3篇里面将继续讲述jQuery的选择器，这篇讲述“层次选择器”。
下面是基本选择器的语法表格：
选择器
功能
返回值
| ancestor descendant
|
根据祖先元素匹配所有的后代元素
|
元素集合
|
| parent>child
|
根据父元素匹配所有子元素
|
元素集合
|
| prev + next
|
匹配所有紧接在prev元素后的相邻元素
|
元素集合
|
| prev ~ siblings
|
匹配prev元素之后的所有兄弟元素
|
元素集合
|
说明：ancestor descendant 与 parent>child 所选择的元素集合是不同的，这一点在下面的示例里面是很显然就能看出来的，ancestor descendant匹配的descendant是ancestor里的所有匹配descendant元素（也就是说可以向下匹配好几层），而parent>child只匹配parent元素的子元素（即只能匹配一层）；另外，prev + next可以使用.next()代替，而prev ~ siblings可以用.nextAll()来代替。
下面是示例代码，请自己调整注释符的位置来体会各种不同的选择器的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></p>
<p><head><br />
<title>chap2-3 使用jQuery层次选择器</title><br />
<meta http-equiv="content-type" content="text/html;charset=utf-8" /><br />
<meta name="generator" content="Geany 0.20" /><br />
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script><br />
<style type="text/css"><br />
body{<br />
font-size:12px;<br />
text-align:center;<br />
}<br />
div,span{<br />
float:left;<br />
border:solid 1px #ccc;<br />
margin:8px;<br />
display:none;<br />
}<br />
.clsFraA{<br />
width:65px;<br />
height:65px;<br />
}<br />
.clsFraP{<br />
width:45px;<br />
height:45px;<br />
background-color:#eee;<br />
}<br />
.clsFraC{<br />
width:25px;<br />
height:25px;<br />
background-color:#ddd;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
/*$(function(){ //匹配后代元素<br />
$("#divMid").css("display","block");<br />
$("div span").css("display","block");<br />
});<br />
$(function(){ //匹配子元素<br />
$("#divMid").css("display","block");<br />
$("div>span").css("display","block");<br />
});*/<br />
$(function(){ //匹配后面元素<br />
$("#divMid + div").css("display","block");<br />
//$("#divMid").next().css("display","block");<br />
});<br />
/*$(function(){ //合并所有后面元素<br />
$("#divMid ~ div").css("display","block");<br />
//$("#divMid").nextAll().css("display","block");<br />
});<br />
$(function(){ //匹配所有相邻的元素<br />
$("#divMid").siblings("div")<br />
.css("display","block");<br />
});*/<br />
</script><br />
</head></p>
<p><body><br />
<div class="clsFraA">Left</div><br />
<div class="clsFraA" id="divMid"><br />
<span class="clsFraP" id="Span1"><br />
<span class="clsFraC" id="Span2"></span><br />
</span><br />
</div><br />
<div class="clsFraA">Right_1</div><br />
<div class="clsFraA">Right_2</div><br />
</body><br />
</html><br />
|