JQ选择器实验

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JQ选择器实验</title>
 6         <style>
 7             div{
 8                 background-color: gray;
 9                 width: 200px;
10                 height: 200px;
11                 margin-right:20px ;
12                 float: left;
13             }
14             
15             .mini{
16                 width: 80px;
17                 height: 80px;
18                 background-color: darkgray;
19                 margin-bottom:20px ;
20             }
21         </style>
22         
23         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
24         
25         <script>
26             $(function(){
27                 $("#btn1").click(function(){
28                     $("div").css("background-color","yellow");
29                 });
30                 
31                 $("#btn2").click(function(){
32                     $(".mini").css("background-color","yellow");
33                 });
34                 
35                 $("#btn3").click(function(){
36                     $("#div3").css("background-color","yellow");
37                 });
38                 
39                 $("#btn4").click(function(){
40                     $("body div").css("background-color","yellow");
41                 });
42                 
43                 $("#btn5").click(function(){
44                     $("body>div").css("background-color","yellow");
45                 });
46                 
47                 $("#btn6").click(function(){
48                     $("#div1+div").css("background-color","yellow");
49                 });
50                 
51                 $("#btn7").click(function(){
52                     $("#div7~div").css("background-color","yellow");
53                 });
54                 
55                 $("#btn8").click(function(){
56                     $("*").css("background-color","yellow");
57                 });
58             });
59         </script>
60     </head>
61     <body>
62         <div id="div1">
63             <div id="div2" class="mini"></div>
64         </div>
65         <div id="div3">
66             <div id="div4" class="mini"></div>
67             <div id="div5" class="mini"></div>
68         </div>
69         <div id="div6">
70             <div id="div7" class="mini"></div>
71             <div id="div8" class="mini"></div>
72             <div id="div9" class="mini"></div>
73         </div>
74         <span id="span1" style="background-color: gray; width: 200px; height: 200px; float: left;">span</span>
75         <div style="clear: both; width: 100%; background-color: white; margin-top: 20px;">
76         <input type="button" value="元素选择器" id="btn1"/>
77         <input type="button" value="类选择器" id="btn2"/>
78         <input type="button" value="ID选择器" id="btn3"/>
79         <input type="button" value="后代选择器" id="btn4"/>
80         <input type="button" value="子元素选择器" id="btn5"/>
81         <input type="button" value="相邻兄弟选择器" id="btn6"/>
82         <input type="button" value="通用兄弟选择器" id="btn7"/>
83         <input type="button" value="通配符选择器" id="btn8"/>
84         </div>
85     </body>
86 </html>
猜你喜欢
