1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jQuery选择器大全</title>
6 <script src="js/jquery-3.1.0.min.js"></script>
7 <style>
8 td{
9 border:5px yellow solid;
10 }
11 .focused {
12 background: #abcdef;
13 }
14 </style>
15 </head>
16 <body>
17 <div id="myDiv">id="myDiv"</div>
18 <div id="notMe">id="notMe"</div>
19 <div>div1</div>
20 <div>div2</div>
21 <span>span</span>
22 <div class="myClass">div class="myClass"</div>
23 <div class="myClass">div class="myClass"</div>
24 <div class="notME">div class="notMe"</div>
25 <p class="notMyClass">p class="notMyClass"</p>
26 <p class="notMyClass">p class="notMyClass"</p>
27 <form>
28 <label>Name:</label>
29 <input name="name" />
30 <fieldset>
31 <label>Newsletter:</label>
32 <input name="newsletter" />
33 </fieldset>
34 </form>
35 <input name="none" />
36 <ul>
37 <li>list item1</li>
38 <li>list item2</li>
39 <li>list item3</li>
40 <li>list item4</li>
41 <li>list item5</li>
42 </ul>
43 <input type="text" name="apple"/>
44 <input type="text" name="flower" checked="checked"/>
45 <table style="border:2px pink solid">
46 <tr>
47 <td>value1</td>
48 </tr>
49 <tr>
50 <td>value2</td>
51 </tr>
52 <tr>
53 <td>value3</td>
54 </tr>
55 </table>
56 <h1>Header 1</h1>
57 <p>Contents 1</p>
58 <h2>Header 2</h2>
59 <p>Contents 2</p>
60 <button id="run">Run</button><div></div>
61 <div id="content">
62 <input tabIndex="1">
63 <input tabIndex="2">
64 <select tabIndex="3">
65 <option>select menu</option>
66 </select>
67 <div tabIndex="4">
68 a div
69 </div>
70 </div>
71 <table>
72 <tr style="display:none"><td>Value 1</td></tr>
73 <tr><td>Value 2</td></tr>
74 </table>
75 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
76 <input type="checkbox" name="newsletter" value="Cold Fusion" />
77 <input type="checkbox" name="accept" value="Evil Plans" />
78 <input name="man-news" />
79 <input name="milkman" />
80 <input name="letterman2" />
81 <input name="newmilk" />
82 <script>
83 $(function(){
84 $("#myDiv").css({width:"100",height:"20",background:"blue",});
85 //用于搜索的，通过元素的 id 属性中给定的值
86 //查找 ID 为"myDiv"的元素
87 var a=$('#myDiv');
88 console.log(a);
89 //根据给定的元素标签名匹配所有元素
90 //查找一个 DIV 元素
91 var b=$("div");
92 console.log(b);
93 //一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到
94 var c=$(".myClass");
95 console.log(c);
96 //匹配所有元素,多用于结合上下文来搜索。
97 //找到每一个元素
98 var d=$('*');
99 console.log(d);
100 //将每一个选择器匹配到的元素合并后一起返回。
101 //找到匹配任意一个类的元素。
102 var e=$("div.notME,span,p.notMyClass");
103 console.log(e);
104 //在给定的祖先元素下匹配所有的后代元素
105 //找到表单中所有的 input 元素
106 var f=$('form input');
107 console.log(f);
108 //在给定的父元素下匹配所有的子元素
109 //用以匹配元素的选择器，并且它是第一个选择器的子元素
110 //parent > child;匹配表单中所有的子级input元素。
111 var g=$('form > input');
112 console.log(g);
113 //prev + next;匹配所有紧接在 prev 元素后的 next 元素
114 var h=$("label+input");
115 console.log(h);
116 //form ~ input;匹配 form 元素之后的所有 input 元素
117 $('form~input').css({width:"200",height:"40",background:"red",});
118 //:first | 获取匹配的第一个元素
119 $("li:first").css({width:"200",height:"50",background:"green",fontSize:"40px",});
120 // :not(selector);去除所有与给定选择器匹配的元素
121 // 查找所有未选中的 input 元素
122 $('input:not(:checked)').css({
123 width:"300",
124 height:"50",
125 //background:"green",
126 fontSize:"40px",
127 });;
128 // :even匹配所有索引值为偶数的元素，从 0 开始计数
129 // 查找表格的1、3、5...行（即索引值0、2、4...）
130 $("tr:even");
131 //:odd 匹配所有索引值为奇数的元素，从 0 开始计数
132 //查找表格的2、4、6行（即索引值1、3、5...）
133 $("tr:odd")
134 //:eq(index) 匹配一个给定索引值的元素,从 0 开始计数
135 //查找表格第二行
136 $("tr:eq(1)")
137 //:gt(index) 匹配所有大于给定索引值的元素
138 //查找表格第二第三行，即索引值是1和2，也就是比0大
139 $("tr:gt(0)")
140 //:last() 获取最后个元素
141 //获取li的最后个元素
142 $("li:last")
143 //:lt(index) 匹配所有小于给定索引值的元素 从 0 开始计数
144 //查找表格第一第二行，即索引值是0和1，也就是比2小
145 $("tr:it(2)")
146 //:header 匹配如 h1, h2, h3之类的标题元素
147 //给页面内所有标题加上背景色
148 $(":header").css({
149 background:"red",
150 })
151 //:animated 匹配所有正在执行动画效果的元素
152 //只有对不在执行动画效果的元素执行一个动画特效
153 $("#run").click(function(){
154 $("div:not(:animated)").animated({
155 left:"+20",
156 },1000);
157 });
158 //:focus 匹配当前获取焦点的元素
159 //添加一个"focused"的类名给那些有focus方法的元素
160 $( "#content" ).delegate( "*", "focus blur", function( event ) {
161 var elem = $( this );
162 setTimeout(function() {
163 elem.toggleClass( "focused", elem.is( ":focus" ) );
164 }, 0);
165 });
166 //:root 选择该文档的根元素
167 //在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。
168 //设置<html>背景颜色为黄色
169 $(":root").css("background-color","yellow");
170 //:target 选择由文档URI的格式化识别码表示的目标元素
171 //如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。
172 //这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.
173 //:contains(text) 匹配包含给定文本的元素
174 //一个用以查找的字符串
175 $("div:contains('div1')")
176 //:empty 匹配所有不包含子元素或者文本的空元素
177 //查找所有不包含子元素或者文本的空元素
178 $("td:empty")
179 //:has(selector) 匹配含有选择器所匹配的元素的元素
180 //一个用于筛选的选择器
181 //给所有包含 p 元素的 div 元素添加一个 text 类
182 $("div:has(p)").addClass("test");//
183 //:parent 匹配含有子元素或者文本的元素
184 //查找所有含有子元素或者文本的 td 元素
185 $("td:parent")
186 //:hidden 匹配所有不可见元素，或者type为hidden的元素
187 //查找隐藏的 tr
188 $("tr:hidden")
189 //:visible 匹配所有的可见元素
190 //查找所有可见的 tr 元素
191 $("tr:visible")
192 //[attribute]
193 //匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
194 //查找所有含有 id 属性的 div 元素
195 $("div[id]")
196 //[attribute=value] 匹配给定的属性是某个特定值的元素
197 //查找所有 name 属性是 newsletter 的 input 元素
198 $("input[name='newsletter']").attr("checked", true);
199 //[attribute!=value]
200 //匹配所有不含有指定的属性，或者属性不等于特定值的元素
201 //查找所有 name 属性不是 newsletter 的 input 元素
202 $("input[name!='newsletter']").attr("checked", true);
203 //[attribute^=value] 匹配给定的属性是以某些值开始的元素
204 //查找所有 name 以 'news' 开始的 input 元素
205 $("input[name^='news']")
206 //[attribute$=value] 匹配给定的属性是以某些值结尾的元素
207 //查找所有 name 以 'letter' 结尾的 input 元素
208 $("input[name$='letter']")
209 //[attribute*=value] 匹配给定的属性是以包含某些值的元素
210 //查找所有 name 包含 'man' 的 input 元素
211 $("input[name*='man']")
212 //找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
213 $("input[id][name$='man']")
214 //:first-child 匹配第一个子元素
215 //在每个 ul 中查找第一个 li
216 $("ul li:first-child")
217 //:first-of-type
218 //结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于 :nth-of-type(1) 选择器
219 //查找作为父元素的span类型子元素中的"长子"的span标签
220 $("span:first-of-type");
221 //:last-child 匹配最后一个子元素
222 //:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
223 //在每个 ul 中查找最后一个li
224 $("ul li:last-child")
225 //:last-of-type
226 //结构化伪类，匹配E的父元素的最后一个E类型的孩子
227 $("div:last-of-type");
228 //:nth-child 匹配其父元素下的第N个子或奇偶元素
229 //:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。
230 //:nth-child从1开始的，而:eq()是从0算起的！
231 //在每个 ul 查找第 2 个li
232 $("ul li:nth-child(2)")
233 //:nth-last-child(n|even|odd|formula)
234 //选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
235 //匹配子元素序号,必须为整数，注意从1开始而不是0
236 //even 匹配所有偶数元素
237 //odd 匹配所有奇数元素
238 //formula 使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素
239 //(例)在每个匹配的ul中查找倒数第二个li
240 $("ul li:nth-last-child(2)");
241 //:nth-last-of-type 择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
242 //在每个匹配的ul中查找倒数第二个li
243 $("ul li:nth-last-of-type(2)");
244 //:nth-of-type(n|even|odd|formula)
245 //选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
246 //查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。
247 $("span:nth-of-type(2)");
248 //:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
249 //在 ul 中查找是唯一子元素的 li
250 //<ul><li>Glen</li></ul>
251 $("ul li:only-child")
252 //:only-of-type
253 //选择所有没有兄弟元素，且具有相同的元素名称的元素
254
255 //:input; 匹配所有 input, textarea, select 和 button 元素
256 //查找所有的input元素，下面这些元素都会被匹配到。
257 $(":input")
258 //:text 匹配所有的单行文本框
259 //查找所有文本框
260 $(":text")
261 //:password 匹配所有密码框
262 //查找所有密码框
263 $(":password")
264 //:radio 匹配所有单选按钮
265 //查找所有单选按钮
266 $(":radio")
267 //:checkbox 匹配所有复选框
268 //查找所有复选框
269 $(":checkbox")
270 //:submit 匹配所有提交按钮
271 //查找所有提交按钮
272 $(":submit")
273 //:image 匹配所有图像域
274 //如：<input type="image" />
275 $(":image")
276 //:reset 匹配所有重置按钮
277 //查找所有重置按钮
278 $(":reset")
279 //:button 匹配所有按钮
280 //查找所有按钮
281 $(":button")
282 //:file 匹配所有文件域
283 //查找所有文件域
284 $(":file")
285 //:hidden 匹配所有不可见元素，或者type为hidden的元素
286 //查找隐藏的 tr
287 $("tr:hidden")
288 //:visible 匹配所有的可见元素
289 //查找所有可见的 tr 元素
290 $("tr:visible")
291 //[attribute] 匹配包含给定属性的元素
292 //查找所有含有 id 属性的 div 元素
293 $("div[id]")
294
295
296
297
298
299 });
300
301 </script>
302
303
304 </body>
305 </html>
