层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系主要包括后代、父子、相邻、兄弟关系，

通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。

 
选择器 功能 返回值
ancestor descendant 根据祖先元素匹配所有后代元素 元素集合
parent > child 根据父元素匹配所有子元素 元素集合
prev + next 匹配所有紧接在prev元素后的相邻元素 元素集合
prev ~ siblings 匹配prev元素之后的所有兄弟元素 元素集合

说明：ancestor descendant 与 parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~ siblings可以使用nextAll()代替。

Demo如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0
 2 Transitional//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6 <title>使用jQuery层次选择器</title>
 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script>
 8 <style type="text/css">
 9     body{font-size:12px;text-align:center}
10     div,span{float:left;border:solid 1px #ccc;
11              margin:8px;display:none}
12     .clsFraA{width:65px;height:65px}
13     .clsFraP{width:45px;height:45px;background-color:#eee}
14     .clsFraC{width:25px;height:25px;background-color:#ddd}
15 </style>
16 <script type="text/javascript">
17 /**
18     $(function(){    // 匹配后代元素
19         $("#divMid").css("display","block");
20         $("#divMid1").css("display","block");
21         $("div span").css("display","block");
22         alert($("div span").size());
23     }); **/
24 /**
25     $(function(){    // 匹配子元素 
26         $("#divMid").css("display","block");
27         alert($("div>span").size());
28         $("div>span").css("display","block");
29     });     **/
30 /**
31     $(function(){    // 匹配后面元素 
32         //$("#divMid + div").css("display","block");
33         $("#divMid").next().css("display","block");
34     });  **/
35 /**
36     $(function(){    // 匹配后面所有元素
37         //$("#divMid ~ div").css("display","block");
38         $("#divMid").nextAll().css("display","block");
39     });   **/
40 
41     $(function(){    // 匹配所有相邻元素
42         $("#divMid").siblings().css("display","block");
43     }); /**  **/
44 </script>
45 </head>
46 <body>
47     <div class="clsFraA">Left</div>
48     <div class="clsFraA" id="divMid">
49         <span class="clsFraP" id="Span1">Span1
50             <span class="clsFrac" id="Span2">Span2</span>
51         </span>
52         <span class="clsFraP" id="Span4">Span4</span>
53     </div>
54     <div class="clsFraA" id="divMid1">Right_1
55         <span class="clsFraP" id="Span5">Span5</span></div>
56     <div class="clsFraA">Right_2</div>
57     <span class="clsFrac" id="Span3">Span3</span>
58 </body>
59 </html>
Demo

 

posted @ 2014-10-10 16:15  行者无疆Duffy  阅读(168)  评论(0)  编辑  收藏  举报