【代码片段】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章示例4</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(){$("h3").next(".clear").addClass("highlight");});    
 23         $("#btn2").click(function(){$("h3").next().addClass("highlight");});    
 24         $("#btn3").click(function(){$("h3").prev(".clear").addClass("highlight");});
 25         $("#btn4").click(function(){$("h3").prev().addClass("highlight");});
 26         $("#btn5").click(function(){$("h3").nextAll("[class]").addClass("highlight");});        
 27         $("#btn6").click(function(){$("h3").nextAll().addClass("highlight");});
 28         $("#btn7").click(function(){$("h3").prevAll("[class]").addClass("highlight");});
 29         $("#btn8").click(function(){$("h3").prevAll().addClass("highlight");});    
 30         $("#btn9").click(function(){$("h3").siblings("[class]").addClass("highlight");});    
 31         $("#btn10").click(function(){$("h3").siblings().addClass("highlight");});
 32         $("#btn11").click(function(){$("h3").nextUntil(".relative").addClass("highlight");});
 33         $("#btn12").click(function(){$("h3").nextUntil().addClass("highlight");});        
 34         $("#btn13").click(function(){$("h3").prevUntil(".clear").addClass("highlight");});
 35         $("#btn14").click(function(){$("h3").prevUntil().addClass("highlight");});
 36         $("button").click(function(){$("form").removeClass("highlight");});
 37     });
 38 </script>
 39 </head>
 40 <body>
 41     <div class="clear">
 42         &lt;div class="clear"&gt;
 43         <p>
 44             &lt;p&gt;
 45             <span>&lt;span&gt; &lt;/span&gt;</span>
 46             &lt;/p&gt;
 47         </p>
 48         &lt;/div&gt;
 49     </div>
 50     <div>
 51         &lt;div&gt;
 52         <p>&lt;p&gt; &lt;/p&gt;</p>
 53         <p>&lt;p&gt; &lt;/p&gt;</p>
 54         <p>&lt;p&gt; &lt;/p&gt;</p>    
 55         &lt;/div&gt;
 56     </div>
 57     <div class="relative">
 58         &lt;div class="relative"&gt;
 59         <span>&lt;span&gt; &lt;/span&gt;</span>
 60         <span>&lt;span&gt; &lt;/span&gt;</span>
 61         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>            
 62         &lt;/div&gt;
 63     </div>
 64     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
 65     <div class="clear">
 66         &lt;div class="clear"&gt;
 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         <p>
 74             &lt;p&gt;
 75             <span>&lt;span&gt; &lt;/span&gt;</span>
 76             <span>&lt;span&gt; &lt;/span&gt;</span>
 77             &lt;/p&gt;
 78         </p>
 79         &lt;/div&gt;
 80     </div>
 81     <div>
 82         &lt;div&gt;
 83         <p>&lt;p&gt; &lt;/p&gt;</p>
 84         <p>&lt;p&gt; &lt;/p&gt;</p>
 85         <p>&lt;p&gt; &lt;/p&gt;</p>        
 86         &lt;/div&gt;
 87     </div>
 88     <div class="relative">
 89         &lt;div class="relative"&gt;
 90         <span>&lt;span&gt; &lt;/span&gt;</span>
 91         <span>&lt;span&gt; &lt;/span&gt;</span>
 92         <span class="clear">&lt;span class="clear"&gt; &lt;/span&gt;</span>    
 93         &lt;/div&gt;
 94     </div>
 95     <form>
 96         <button type="button" id="btn1">$("h3").next(".clear")</button>
 97         <button type="button" id="btn2">$("h3").next()</button>
 98         <button type="button" id="btn3">$("h3").prev(".clear")</button>
 99         <button type="button" id="btn4">$("h3").prev()</button>
100         <button type="button" id="btn5">$("h3").nextAll("[class]")</button>
101         <button type="button" id="btn6">$("h3").nextAll()</button>
102         <button type="button" id="btn7">$("h3").prevAll("[class]")</button>    
103         <button type="button" id="btn8">$("h3").prevAll()</button>
104         <button type="button" id="btn9">$("h3").siblings("[class]")</button>
105         <button type="button" id="btn10">$("h3").siblings()</button>
106         <button type="button" id="btn11">$("h3").nextUntil(".relative")</button>
107         <button type="button" id="btn12">$("h3").nextUntil()</button>
108         <button type="button" id="btn13">$("h3").prevUntil(".clear")</button>
109         <button type="button" id="btn14">$("h3").prevUntil()</button>                
110     </form>
111 </body>
112 </html>

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