jQuery属性过滤选择器

  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3 <html>
  4   <head>
  5     <!-- jQuery属性过滤选择器 -->
  6     <!-- 
  7         [attribute]                选取拥有此属性的元素                        集合元素        $("div[id]")            选取拥有属性id的元素  
  8         [attribute=value]        选取属性的值为value的元素                    集合元素        $("div[title=test]")    选取属性title为test的div元素
  9         [attribute!=value]        选取属性的值不为value的元素                集合元素        $("div[title!=test]")    选取属性title不等与test的div元素（没有属性title的div元素也会被选取）
 10         [attribute^=value]        选取属性的值以value开始的元素                集合元素        $("div[title^=test]")    选取属性title以test开始的div元素
 11         [attribute$=value]        选取属性的值以value结束的元素                集合元素        $("div[title$=test]")    选取属性title以test结束的div元素
 12         [attribute*=value]        选取属性的值含有value的元素                集合元素        $("div[title*=test]")    选取属性title含有test的div元素
 13         [attribute|=value]        选取属性等于给定字符串或以该字符串为前缀    集合元素        $("div|='en'")             选取属性title等于en或以en为前缀
 14                                 （注意：该字符串后跟一个连字符'-'）的元素
 15                                 
 16         [attribute~=value]        选取属性用空格分隔的值中包含一个给定值的元素    集合元素    $("div~='uk'")             选取属性title用空格分隔的值中包含字符串uk的元素
 17         
 18         [attribute1][attribute2][attributeN]    
 19         用属性选择器合并成一个符合属性选择器 满足多个条件 没选择一次 缩小一次范围
 20         集合元素        
 21         $("div[id][title$=test]")选取拥有属性id 并且属性title以test结束的div元素
 22                             
 23      -->
 24     <meta http-equiv="pragma" content="no-cache">
 25     <meta http-equiv="cache-control" content="no-cache">
 26     <meta http-equiv="expires" content="0">    
 27     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 28     <meta http-equiv="description" content="This is my page">
 29     <script type="text/javascript"  src="../../js/jquery.js"></script>
 30     <style type="text/css">
 31         div,span,p{
 32             width:140px;
 33             height:140px;
 34             margin:5px;
 35             background:#aaa;
 36             border:#000 1px solid;
 37             float:left;
 38             font-size:17px;
 39             font_family:Verdana;
 40         }
 41         div.mini{
 42             width:55px;
 43             height:55px;
 44             background-color:#aaa;
 45             font-size:12px;
 46         }
 47         div.hide{
 48             display:none;
 49         }    
 50     </style>
 51     
 52     <script type="text/javascript" >
 53         
 54 
 55         //选取属性中有title的div
 56         function test1() {
 57             $("div[title]").css("background", "#bbffaa");
 58         }
 59     
 60         //选取title属性值为test的div
 61         function test2() {
 62             $("div[title=test]").css("background", "#bbffaa");
 63         }
 64     
 65         //选取title属性值不为test的div
 66         function test3() {
 67             $("div[title!=test]").css("background", "#bbffaa");
 68         }
 69         
 70         //选取title属性值以te开始的div
 71         function test4() {
 72             $("div[title^=te]").css("background", "#bbffaa");
 73         }
 74         
 75         //选取title属性值以est结束的div
 76         function test5() {
 77             $("div[title$=est]").css("background", "#bbffaa");
 78         }
 79         
 80         //选取title属性值含有es的div
 81         function test6() {
 82             $("div[title*=es]").css("background", "#bbffaa");
 83         }
 84         
 85         //选取title属性id属性 并且属性title值含有es的div
 86         function test7() {
 87             $("div[id][title*=es]").css("background", "#bbffaa");
 88         }
 89     </script>
 90   </head>
 91   <body>
 92   
 93       <div id="one" class="one">
 94           id为one  class为one的div
 95           <div class="mini">class为mini</div>
 96       </div>
 97   
 98       <div class="one"  id="two"  title="test">
 99            id为two class为one title为test的div
100            <div class="mini"  title="other">class为mini  title为other</div>
101            <div class="mini"  title="test">class为mini  title为test</div>
102       </div>
103   
104       <div class="one">
105           <div class="mini">class为mini</div>
106           <div class="mini">class为mini</div>
107           <div class="mini">class为mini</div>
108           <div class="mini"></div>
109       </div>
110   
111       <div class="one">
112           <div class="mini">class为mini</div>
113           <div class="mini">class为mini</div>
114           <div class="mini">class为mini</div>
115           <div class="mini" title="tesst">class为mini title为tesst</div>
116       </div>
117   
118       <div style="display:none;"  class="none">
119           style为display class为none的div
120       </div>
121   
122     <div class="hide">class为hide的div</div>  
123   
124   
125       <div>
126           包涵input的type为hidden的div<input  type="hidden"  size="8"/>
127       </div>
128       
129       <span id="mover">正在执行动画的span元素</span>
130       
131       
132       <br>
133       <input type="button" onclick="test1()"  value="改变含有属性title的div元素的背景色"/>
134       <input type="button" onclick="test2()"  value="改变属性title值等于test的div元素的背景色"/>
135       <input type="button" onclick="test3()"  value="改变属性title值不等于test的div元素的背景色"/>
136       <input type="button" onclick="test4()"  value="改变属性title值以te开始的div元素的背景色"/>
137       <input type="button" onclick="test5()"  value="改变属性title值以est结束的div元素的背景色"/>
138       <input type="button" onclick="test6()"  value="改变属性title值含有es的div元素的背景色"/>
139       <input type="button" onclick="test7()"  value="改变含有属性id 并且属性title值含有es的div元素的背景色"/>
140       
141       
142   </body>
143 </html>