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>