【代码片段】jQuery测试基本选择器

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>第2章示例1</title>
 6 <style type="text/css">
 7     body { width:760px; }
 8     div,p,h3,h1 { border:4px solid black; background-color:green; color:white; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; float:left; }
 9     div p { width:205px; border-width:2px; margin:5px 0; float:none; }
10     h1 { margin:6px 256px; }  h3 { position:relative; margin-right:500px; }
11     div.top { height:65px; }
12     .clear { clear:both; }
13     div.hide { display:none; }  p.hide { visibility:hidden; }
14     .highlight { background-color:gold; color:black; }
15     form { clear:both; }
16     button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:175px; }
17 </style>
18 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
19 <script type="text/javascript">
20     $(document).ready(function(){
21         $("button").click(function(){$("*").removeClass("highlight");});
22         $("#btn1").click(function(){$("*").addClass("highlight");});    
23         $("#btn2").click(function(){$("p").addClass("highlight");});    
24         $("#btn3").click(function(){$("#core").addClass("highlight");});
25         $("#btn4").click(function(){$(".clear").addClass("highlight");});
26         $("#btn5").click(function(){$("h3,.bottom").addClass("highlight");});
27         $("#btn6").click(function(){$("div.bottom").addClass("highlight");});            
28         function swing(){
29             $("h3").animate({left:"500"},7000)
30                     .animate({left:"0"},7000, swing);
31         }
32         swing();                            
33     });
34 </script>
35 </head>
36 <body>
37     <h1>&lt;h1&gt; &lt;/h1&gt;</h1>    
38     <div class="clear top">
39         &lt;div class="clear top"&gt;
40         <p>&lt;p&gt;hello&lt;/p&gt;</p>
41         &lt;/div&gt;
42     </div>
43     <div class="top" id="core">
44         &lt;div class="top" id="core"&gt;
45         <p>&lt;p&gt; &lt;/p&gt;</p>
46         &lt;/div&gt;
47     </div>
48     <div class="top">
49         &lt;div class="top"&gt;<br/>
50         hello, John<br/>
51         &lt;/div&gt;
52     </div>        
53     <p class="clear">&lt;p class="clear"&gt; &lt;/p&gt;</p>
54     <p>&lt;p &gt; &lt;/p&gt;</p>
55     <p>&lt;p &gt; &lt;/p&gt;</p>    
56     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
57     <p class="clear">&lt;p class="clear"&gt; &lt;/p&gt;</p>
58     <p>&lt;p &gt; &lt;/p&gt;</p>
59     <p class="hide">&lt;p class="hide"&gt; &lt;/p&gt;</p>
60     <div class="clear bottom">
61         &lt;div class="clear bottom"&gt;
62         <p>&lt;p&gt; &lt;/p&gt;</p>
63         <p>&lt;p&gt; &lt;/p&gt;</p>
64         <p>&lt;p&gt; &lt;/p&gt;</p>
65         &lt;/div&gt;
66     </div>
67     <div class="bottom">
68         &lt;div class="bottom"&gt;
69         <p>&lt;p&gt; &lt;/p&gt;</p>
70         <p>&lt;p&gt; &lt;/p&gt;</p>
71         <p>&lt;p&gt; &lt;/p&gt;</p>        
72         &lt;/div&gt;
73     </div>
74     <div class="hide bottom">
75         &lt;div class="hide bottom"&gt;
76         <p>&lt;p&gt; &lt;/p&gt;</p>
77         <p>&lt;p&gt; &lt;/p&gt;</p>
78         <p>&lt;p&gt; &lt;/p&gt;</p>        
79         &lt;/div&gt;
80     </div>
81     <form>
82         <button type="button" id="btn1">$("*")</button>
83         <button type="button" id="btn2">$("p")</button>
84         <button type="button" id="btn3">$("#core")</button>
85         <button type="button" id="btn4">$(".clear")</button>
86         <button type="button" id="btn5">$("h3,.bottom")</button>
87         <button type="button" id="btn6">$("div.bottom")</button>    
88     </form>
89 </body>
90 </html>