jquery 选择器 的学习，自己慢慢来 

 1//加载所有元素后，执行下列代码
 <script type="text/javascript">
 2   $(document).ready(function(){
 3        //选择 id为 one 的元素
 4       $('#btn1').click(function(){
 5           $('#one').css("background","#bfa");
 6       });
 7       //选择 class 为 mini 的所有元素
 8       $('#btn2').click(function(){
 9           $('.mini').css("background","#bfa");
10       });
11       //选择 元素名是 div 的所有元素
12       $('#btn3').click(function(){
13           $('div').css("background","#bfa");
14       });
15       //选择 所有的元素
16       $('#btn4').click(function(){
17           $('*').css("background","#bfa");
18       });
19       //选择 所有的span元素和id为two的div元素
20       $('#btn5').click(function(){
21           $('span,#two').css("background","#bfa");
22       });    
23 
24 
25   });
26   </script>
 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>2-4</title>
 6  <!--   引入jQuery --> 
 7  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 8  <script src="../scripts/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        //选择 id为 one 的元素
13       $('#btn1').click(function(){
14           $('#one').css("background","#bfa");
15       });
16       //选择 class 为 mini 的所有元素
17       $('#btn2').click(function(){
18           $('.mini').css("background","#bfa");
19       });
20       //选择 元素名是 div 的所有元素
21       $('#btn3').click(function(){
22           $('div').css("background","#bfa");
23       });
24       //选择 所有的元素
25       $('#btn4').click(function(){
26           $('*').css("background","#bfa");
27       });
28       //选择 所有的span元素和id为two的div元素
29       $('#btn5').click(function(){
30           $('span,#two').css("background","#bfa");
31       });    
32 
33 
34   });
35   </script>
36 </head>
37 <body>
38   <button id="reset">手动重置页面元素</button>
39   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
40  <h3>基本选择器.</h3>
41  
42  <!-- 控制按钮 -->
43   <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
44   <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
45   <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
46   <input type="button" value="选择 所有的元素." id="btn4"/>
47   <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
48 
49   <br /><br />
50 
51    <!-- 测试的元素 -->
52   <div class="one" id="one" >
53  id为one,class为one的div
54       <div class="mini">class为mini</div>
55   </div>
56 
57     <div class="one"  id="two" title="test" >
58      id为two,class为one,title为test的div.
59       <div class="mini"  title="other">class为mini,title为other</div>
60       <div class="mini"  title="test">class为mini,title为test</div>
61   </div>
62 
63   <div class="one">
64       <div class="mini">class为mini</div>
65       <div class="mini">class为mini</div>
66       <div class="mini">class为mini</div>
67       <div class="mini"></div>
68   </div>
69 
70 
71 
72   <div class="one">
73       <div class="mini">class为mini</div>
74       <div class="mini">class为mini</div>
75       <div class="mini">class为mini</div>
76       <div class="mini"  title="tesst">class为mini,title为tesst</div>
77   </div>
78 
79 
80   <div style="display:none;"  class="none">style的display为"none"的div</div>
81   
82   <div class="hide">class为"hide"的div</div>
83  
84   <div>
85   包含input的type为"hidden"的div<input type="hidden" size="8"/>
86   </div>
87 
88   
89   <span id="mover">正在执行动画的span元素.</span>
90 
91 </body>
92 </html>

 

posted @ 2015-08-14 09:36  风儿风儿飞  阅读(140)  评论(0)  编辑  收藏  举报