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>
