jQuery选择器之层次选择器Demo

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_34381666

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量71

点赞数

文章标签： javascript xhtml ViewUI

测试代码:

02-层次选择器.html

 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.4.2.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       $(document).ready(function(){
12           //<input type="button" value="选择 body内的所有div元素." id="btn1"/>
13           $("#btn1").click(function(){
14                   $("body div").css("background","red");
15           });
16           
17           // > <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
18           $("#btn2").click(function(){
19                   $("body>div").css("background","red");
20           });
21           
22           //+<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
23           $("#btn3").click(function(){
24                   $("#one+div").css("background","red");
25           });
26           
27           //~<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
28           $("#btn4").click(function(){
29                   $("#two~div").css("background","red");
30           });
31           
32           //<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>//$("#two").siblings("div")
33           $("#btn5").click(function(){
34                   $("#two").siblings("div").css("background","red");
35           });
36     });
37   </script>
38 </head>
39 <body>
40   <h3>层次选择器.</h3>
41   <button id="reset">手动重置页面元素</button>
42   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
43  
44   <input type="button" value="选择 body内的所有div元素." id="btn1"/>
45   <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
46   <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
47   <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
48   <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
49   <br />
50   <br />
51   
52    <!-- 测试的元素 -->
53   <div class="one" id="one" >
54  id为one,class为one的div
55       <div class="mini">class为mini</div>
56   </div>
57 
58     <div class="one"  id="two" title="test" >
59      id为two,class为one,title为test的div.
60       <div class="mini"  title="other">class为mini,title为other</div>
61       <div class="mini"  title="test">class为mini,title为test</div>
62   </div>
63 
64   <div class="one">
65       <div class="mini">class为mini</div>
66       <div class="mini">class为mini</div>
67       <div class="mini">class为mini</div>
68       <div class="mini"></div>
69   </div>
70 
71   
72 
73   <div class="one">
74       <div class="mini">class为mini</div>
75       <div class="mini">class为mini</div>
76       <div class="mini">class为mini</div>
77       <div class="mini"  title="tesst">class为mini,title为tesst</div>
78   </div>
79 
80 
81   <div style="display:none;"  class="none">style的display为"none"的div</div>
82   
83   <div class="hide">class为"hide"的div</div>
84  
85   <div>
86   包含input的type为"hidden"的div<input type="hidden" size="8"/>
87   </div>
88 
89   
90   <span id="mover">正在执行动画的span元素.</span>
91 
92 <!-- Resources from http://down.liehuo.net -->
93 </body>
94 </html>