【代码片段】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章示例2</title>
 6 <style type="text/css">
 7     body { width:760px; }                                                                
 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; width:240px; }
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").removeAttr("disabled").click(function(){$("*").removeClass("highlight");});
22         $("#btn1").click(function(){$("div").children("span").addClass("highlight");});    
23         $("#btn2").click(function(){$("div").children().addClass("highlight");});    
24         $("#btn3").click(function(){$("div").find("span").addClass("highlight");});
25         $("#btn4").click(function(){$("div").find().addClass("highlight");});
26         $("#btn5").click(function(){$("div").find("span:first").addClass("highlight");});        
27         $("#btn6").click(function(){
28             $("div:first").contents().addClass("highlight").filter(function(){return this.nodeType==3;}).wrap("<b class='highlight'></b>");
29             $("button").attr("disabled","disabled").text("刷新页面后再点击！");
30         });                            
31     });
32 </script>
33 </head>
34 <body>
35     <div class="clear">
36         &lt;div class="clear"&gt;
37         <p>
38             &lt;p&gt;
39             <span>&lt;span&gt; &lt;/span&gt;</span>
40             &lt;/p&gt;
41         </p>
42         &lt;/div&gt;
43     </div>
44     <div>
45         &lt;div&gt;
46         <p>&lt;p&gt; &lt;/p&gt;</p>
47         <p>&lt;p&gt; &lt;/p&gt;</p>
48         <p>&lt;p&gt; &lt;/p&gt;</p>    
49         &lt;/div&gt;
50     </div>
51     <div class="relative">
52         &lt;div class="relative"&gt;
53         <span>&lt;span&gt; &lt;/span&gt;</span>
54         <span>&lt;span&gt; &lt;/span&gt;</span>
55         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>            
56         &lt;/div&gt;
57     </div>
58     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
59     <div class="clear">
60         &lt;div class="clear"&gt;
61         <p>
62             &lt;p&gt;
63             <span>&lt;span&gt; &lt;/span&gt;</span>
64             <span>&lt;span&gt; &lt;/span&gt;</span>
65             &lt;/p&gt;
66         </p>
67         <p>
68             &lt;p&gt;
69             <span>&lt;span&gt; &lt;/span&gt;</span>
70             <span>&lt;span&gt; &lt;/span&gt;</span>
71             &lt;/p&gt;
72         </p>
73         &lt;/div&gt;
74     </div>
75     <div>
76         &lt;div&gt;
77         <p>&lt;p&gt; &lt;/p&gt;</p>
78         <p>&lt;p&gt; &lt;/p&gt;</p>
79         <p>&lt;p&gt; &lt;/p&gt;</p>        
80         &lt;/div&gt;
81     </div>
82     <div class="relative">
83         &lt;div class="relative"&gt;
84         <span>&lt;span&gt; &lt;/span&gt;</span>
85         <span>&lt;span&gt; &lt;/span&gt;</span>
86         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>    
87         &lt;/div&gt;
88     </div>
89     <form>
90         <button type="button" id="btn1">$("div").children("span")</button>
91         <button type="button" id="btn2">$("div").children()</button>
92         <button type="button" id="btn3">$("div").find("span")</button>
93         <button type="button" id="btn4">$("div").find()</button>
94         <button type="button" id="btn5">$("div").find("span:first")</button>
95         <button type="button" id="btn6">$("div:first").contents()</button>
96     </form>
97 </body>
98 </html>

posted @ 2013-03-05 19:12  KOJYA  阅读(155)  评论(0)  编辑  收藏  举报