【代码片段】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章示例3</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: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").click(function(){$("*").removeClass("highlight");});                       
 22         $("#btn1").click(function(){$("p:first-child").addClass("highlight");});    
 23         $("#btn2").click(function(){$("p:last-child").addClass("highlight");});    
 24         $("#btn3").click(function(){$("p:only-child").addClass("highlight");});
 25         $("#btn4").click(function(){$("p:nth-child(odd)").addClass("highlight");});
 26         $("#btn5").click(function(){$("p:nth-child(even)").addClass("highlight");});    
 27         $("#btn6").click(function(){$("p:nth-child(2)").addClass("highlight");});    
 28         $("#btn7").click(function(){$("p:nth-child(3n+1)").addClass("highlight");});
 29         $("#btn8").click(function(){$("p:nth-child(n+3)").addClass("highlight");});    
 30         $("#btn9").click(function(){$("p:nth-child(-n+3)").addClass("highlight");});
 31         $("#btn10").click(function(){$("p:nth-child(3n)").addClass("highlight");});
 32         $("#btn11").click(function(){$("p:nth-child(3n-1)").addClass("highlight");});                    
 33         function swing() {
 34             $("h3").animate({left:"500"},7000)
 35                     .animate({left:"0"},7000, swing);
 36         }
 37         swing();                            
 38     });
 39 </script>
 40 </head>
 41 <body>
 42     <h1>&lt;h1&gt; &lt;/h1&gt;</h1>    
 43     <div class="clear top">
 44         &lt;div class="clear top"&gt;
 45         <p>&lt;p&gt;hello&lt;/p&gt;</p>
 46         &lt;/div&gt;
 47     </div>
 48     <div class="top" id="core">
 49         &lt;div class="top" id="core"&gt;
 50         <p>&lt;p&gt; &lt;/p&gt;</p>
 51         &lt;/div&gt;
 52     </div>
 53     <div class="top">
 54         &lt;div class="top"&gt;<br/>
 55         hello<br/>
 56         &lt;/div&gt;
 57     </div>        
 58     <p class="clear">&lt;p class="clear"&gt; &lt;/p&gt;</p>
 59     <p>&lt;p &gt; &lt;/p&gt;</p>
 60     <p>&lt;p &gt; &lt;/p&gt;</p>    
 61     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
 62     <p class="clear">&lt;p class="clear"&gt; &lt;/p&gt;</p>
 63     <p>&lt;p &gt; &lt;/p&gt;</p>
 64     <p class="hide">&lt;p class="hide"&gt; &lt;/p&gt;</p>
 65     <div class="clear bottom">
 66         &lt;div class="clear bottom"&gt;
 67         <p>&lt;p&gt; &lt;/p&gt;</p>
 68         <p>&lt;p&gt; &lt;/p&gt;</p>
 69         <p>&lt;p&gt; &lt;/p&gt;</p>
 70         &lt;/div&gt;
 71     </div>
 72     <div class="bottom">
 73         &lt;div class="bottom"&gt;
 74         <p>&lt;p&gt; &lt;/p&gt;</p>
 75         <p>&lt;p&gt; &lt;/p&gt;</p>
 76         <p>&lt;p&gt; &lt;/p&gt;</p>        
 77         &lt;/div&gt;
 78     </div>
 79     <div class="hide bottom">
 80         &lt;div class="hide bottom"&gt;
 81         <p>&lt;p&gt; &lt;/p&gt;</p>
 82         <p>&lt;p&gt; &lt;/p&gt;</p>
 83         <p>&lt;p&gt; &lt;/p&gt;</p>        
 84         &lt;/div&gt;
 85     </div>
 86     <form>
 87         <button type="button" id="btn1">$("p:first-child")</button>
 88         <button type="button" id="btn2">$("p:last-child")</button>
 89         <button type="button" id="btn3">$("p:only-child")</button>    
 90         <button type="button" id="btn4">$("p:nth-child(odd)")</button>
 91         <button type="button" id="btn5">$("p:nth-child(even)")</button>
 92         <button type="button" id="btn6">$("p:nth-child(2)")</button>
 93         <button type="button" id="btn7">$("p:nth-child(3n+1)")</button>    
 94         <button type="button" id="btn8">$("p:nth-child(n+3)")</button>    
 95         <button type="button" id="btn9">$("p:nth-child(-n+3)")</button>    
 96         <button type="button" id="btn10">$("p:nth-child(3n)")</button>
 97         <button type="button" id="btn11">$("p:nth-child(3n-1)")</button>                    
 98     </form>
 99 </body>
100 </html>