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