【代码片段】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>第3章示例5</title>
 6 <style type="text/css">
 7     body { width:780px; }
 8     div,p,h3,span { border:4px solid black; background-color:green; color:white; float:left; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; display:block; }
 9     div p,div span { width:205px; border-width:2px; margin:5px 0; float:none; }
10     p span { width:193px; border-width:1px;}
11     h3 { margin-right:500px; }    
12     .clear { clear:both; }
13     .relative { position:relative; }
14     .highlight { background-color:gold; color:black; }    
15     form { clear:both; font:bold 14px/1 Arial,Helvetica,sans-serif; }
16     button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; }
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(){$("div").add("p:last").addClass("highlight");});    
23         $("#btn2").click(function(){$("body").children(":eq(3)").prevAll("[class]").andSelf().addClass("highlight");});    
24         $("#btn3").click(function(){$("body").children(":eq(3)").prevAll("[class]").andSelf().andSelf().addClass("highlight");});
25         $("#btn4").click(function(){$("body").children(":eq(3)").prevAll("[class]").andSelf().children("p").andSelf().addClass("highlight");});                                        
26     });
27 </script>
28 </head>
29 <body>
30     <div class="clear">
31         &lt;div class="clear"&gt;
32         <p>
33             &lt;p&gt;
34             <span>&lt;span&gt; &lt;/span&gt;</span>
35             &lt;/p&gt;
36         </p>
37         &lt;/div&gt;
38     </div>
39     <div>
40         &lt;div&gt;
41         <p>&lt;p&gt; &lt;/p&gt;</p>
42         <p>&lt;p&gt; &lt;/p&gt;</p>
43         <p>&lt;p&gt; &lt;/p&gt;</p>    
44         &lt;/div&gt;
45     </div>
46     <div class="relative">
47         &lt;div class="relative"&gt;
48         <span>&lt;span&gt; &lt;/span&gt;</span>
49         <span>&lt;span&gt; &lt;/span&gt;</span>
50         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>            
51         &lt;/div&gt;
52     </div>
53     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
54     <div class="clear">
55         &lt;div class="clear"&gt;
56         <p>
57             &lt;p&gt;
58             <span>&lt;span&gt; &lt;/span&gt;</span>
59             <span>&lt;span&gt; &lt;/span&gt;</span>
60             &lt;/p&gt;
61         </p>
62         <p>
63             &lt;p&gt;
64             <span>&lt;span&gt; &lt;/span&gt;</span>
65             <span>&lt;span&gt; &lt;/span&gt;</span>
66             &lt;/p&gt;
67         </p>
68         &lt;/div&gt;
69     </div>
70     <div>
71         &lt;div&gt;
72         <p>&lt;p&gt; &lt;/p&gt;</p>
73         <p>&lt;p&gt; &lt;/p&gt;</p>
74         <p>&lt;p&gt; &lt;/p&gt;</p>        
75         &lt;/div&gt;
76     </div>
77     <div class="relative">
78         &lt;div class="relative"&gt;
79         <span>&lt;span&gt; &lt;/span&gt;</span>
80         <span>&lt;span&gt; &lt;/span&gt;</span>
81         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>    
82         &lt;/div&gt;
83     </div>
84     <form>
85         <button type="button" id="btn1">$("div").add("p:last")</button>
86         <button type="button" id="btn2">$("body").children(":eq(3)").prevAll("[class]").andSelf()</button>
87         <button type="button" id="btn3">$("body").children(":eq(3)").prevAll("[class]").andSelf().andSelf()</button>
88         <button type="button" id="btn4">$("body").children(":eq(3)").prevAll("[class]").andSelf().children("p").andSelf()</button>            
89     </form>
90 </body>
91 </html>