【代码片段】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章示例3</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; width:245px; }
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(){$("span").parent("div").addClass("highlight");});    
23         $("#btn2").click(function(){$("span").parent().addClass("highlight");});    
24         $("#btn3").click(function(){$("span").parents("div").addClass("highlight");});
25         $("#btn4").click(function(){$("span").parents().addClass("highlight");});
26         $("#btn5").click(function(){$("span").parentsUntil("body").addClass("highlight");});
27         $("#btn6").click(function(){$("span").parentsUntil().addClass("highlight");});        
28         $("#btn7").click(function(){$("span").offsetParent().addClass("highlight");});
29         $("#btn8").click(function(){$("span").closest(".clear").addClass("highlight");});                                    
30     });
31 </script>
32 </head>
33 <body>
34     <div class="clear">
35         &lt;div class="clear"&gt;
36         <p>
37             &lt;p&gt;
38             <span>&lt;span&gt; &lt;/span&gt;</span>
39             &lt;/p&gt;
40         </p>
41         &lt;/div&gt;
42     </div>
43     <div>
44         &lt;div&gt;
45         <p>&lt;p&gt; &lt;/p&gt;</p>
46         <p>&lt;p&gt; &lt;/p&gt;</p>
47         <p>&lt;p&gt; &lt;/p&gt;</p>    
48         &lt;/div&gt;
49     </div>
50     <div class="relative">
51         &lt;div class="relative"&gt;
52         <span>&lt;span&gt; &lt;/span&gt;</span>
53         <span>&lt;span&gt; &lt;/span&gt;</span>
54         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>            
55         &lt;/div&gt;
56     </div>
57     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
58     <div class="clear">
59         &lt;div class="clear"&gt;
60         <p>
61             &lt;p&gt;
62             <span>&lt;span&gt; &lt;/span&gt;</span>
63             <span>&lt;span&gt; &lt;/span&gt;</span>
64             &lt;/p&gt;
65         </p>
66         <p>
67             &lt;p&gt;
68             <span>&lt;span&gt; &lt;/span&gt;</span>
69             <span>&lt;span&gt; &lt;/span&gt;</span>
70             &lt;/p&gt;
71         </p>
72         &lt;/div&gt;
73     </div>
74     <div>
75         &lt;div&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     <div class="relative">
82         &lt;div class="relative"&gt;
83         <span>&lt;span&gt; &lt;/span&gt;</span>
84         <span>&lt;span&gt; &lt;/span&gt;</span>
85         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>    
86         &lt;/div&gt;
87     </div>
88     <form>
89         <button type="button" id="btn1">$("span").parent("div")</button>
90         <button type="button" id="btn2">$("span").parent()</button>
91         <button type="button" id="btn3">$("span").parents("div")</button>
92         <button type="button" id="btn4">$("span").parents()</button>
93         <button type="button" id="btn5">$("span").parentsUntil("body")</button>
94         <button type="button" id="btn6">$("span").parentsUntil()</button>
95         <button type="button" id="btn7">$("span").offsetParent()</button>
96         <button type="button" id="btn8">$("span").closest(".clear")</button>        
97     </form>
98 </body>
99 </html>

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