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

posted @ 2013-03-05 17:44  KOJYA  阅读(113)  评论(0)  编辑  收藏  举报