jQuery层级选择器

1.层级选择器介绍

层级选择器
　　A B 　　获取A元素内部的所有B元素
　　A>B 　　获取A元素内部的所有B子元素(父子元素)
　　A+B 　　获得A元素后面的第一个B兄弟(兄弟关系)
　　A~B 　　获得A元素后面的所有的兄弟B(兄弟关系)
2.代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  <title>02-层次选择器.html</title>
 6  <!--   引入jQuery --> 
 7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 8  <script src="./script/assist.js" type="text/javascript"></script>
 9  <link rel="stylesheet" type="text/css" href="./css/style.css" />  
10   <script type="text/javascript">
11       $(function(){
12 //          <input type="button" value="选择 body内的所有div元素." id="btn1"/>
13           $("#btn1").click(function(){
14               $("body div").css("background-color","red");
15           });
16 //              <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
17           $("#btn2").click(function(){
18               $("body>div").css("background-color","red");
19           });
20 //              <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
21           $("#btn3").click(function(){
22               $("#one + div").css("background-color","red");
23           });
24 //              <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
25           $("#btn4").click(function(){
26               $("#two~div").css("background-color","red");
27           });
28 //              <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
29           $("#btn5").click(function(){
30               $("#two").siblings("div").css("background-color","red");
31           });
32       });
33   </script>
34 </head>
35 <body>
36   <h3>层次选择器.</h3>
37   <button id="reset">手动重置页面元素</button>
38   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
39  
40   <input type="button" value="选择 body内的所有div元素." id="btn1"/>
41   <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
42   <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
43   <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
44   <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
45   <br />
46   <br />
47   
48    <!-- 测试的元素 -->
49   <div class="one" id="one" >
50  id为one,class为one的div
51       <div class="mini">class为mini</div>
52   </div>
53 
54     <div class="one"  id="two" title="test" >
55      id为two,class为one,title为test的div.
56       <div class="mini"  title="other">class为mini,title为other</div>
57       <div class="mini"  title="test">class为mini,title为test</div>
58   </div>
59 
60   <div class="one">
61       <div class="mini">class为mini</div>
62       <div class="mini">class为mini</div>
63       <div class="mini">class为mini</div>
64       <div class="mini"></div>
65   </div>
66 
67   
68 
69   <div class="one">
70       <div class="mini">class为mini</div>
71       <div class="mini">class为mini</div>
72       <div class="mini">class为mini</div>
73       <div class="mini"  title="tesst">class为mini,title为tesst</div>
74   </div>
75 
76 
77   <div style="display:none;"  class="none">style的display为"none"的div</div>
78   
79   <div class="hide">class为"hide"的div</div>
80  
81   <div>
82   包含input的type为"hidden"的div<input type="hidden" size="8"/>
83   </div>
84 
85   
86   <span id="mover">正在执行动画的span元素.</span>
87 
88 </body>
89 </html>
理解记忆，容易混淆