层次选择器

层次选择器通过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

 

你可能感兴趣的:(选择器)