jQuery 选择器总结

Posted 2020-08-09

一、基本选择器

1．#id选择器

通过元素id选择指定元素

1 <div id="notMe"><p>id="notMe"</p></div>
2 <div id="myDiv">id="myDiv"</div>
3 
4 jq:
5 $("#myDiv");
6 result:
7 [ <div id="myDiv">id="myDiv"</div> ]

 

2．element选择器

通过元素标签名选择指定元素

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jq:
$("div");
result:
[ <div>DIV1</div>, <div>DIV2</div> ]

 

3．class选择器

通过元素类名选择指定元素

1 <div class="notMe">div class="notMe"</div>
2 <div class="myClass">div class="myClass"</div>
3 <span class="myClass">span class="myClass"</span>
4 
5 jq:
6 $(".myClass");
7 result:
8 [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

 

4．*选择器

元素通配符，选择所有元素

1 <div>DIV</div>
2 <span>SPAN</span>
3 <p>P</p>
4 
5 jq:
6 $("*")
7 result:
8 [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

 

5．selector1,selector2,selectorN选择器

分组选择。用逗号（，）隔开，用多个选择器选择元素

1 <div>div</div>
2 <p class="myClass">p class="myClass"</p>
3 <span>span</span>
4 <p class="notMyClass">p class="notMyClass"</p>
5 
6 jq:
7 $("div,span,p.myClass")
8 result:
9 [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

 

二、层级选择器

1．ancestor descendant选择器

‘空格’，子孙元素选择符。选择父类元素中匹配的子孙元素

2．parent>child选择器

‘>’，直接子元素选择符。选择父类元素中的子元素

3．prev+next选择器

‘+’，紧接同辈选择符。选择元素后面紧接的元素

4．prev ~ siblings选择器

‘~’，后同辈选择符。选择元素后面所有的元素

 1 <form>
 2   <label>Name:</label>
 3   <input name="name" />
 4   <fieldset>
 5       <label>Newsletter:</label>
 6       <input name="newsletter" />
 7  </fieldset>
 8 </form>
 9 <input name="none" />
10 
11 jq:
12 $("form input")
13 result:
14 [ <input name="name" />, <input name="newsletter" /> ]
15 
16 jq:
17 $("form > input")
18 result:
19 [ <input name="name" /> ]
20 
21 jq:
22 $("label + input")
23 result:
24 [ <input name="name" />, <input name="newsletter" /> ]
25 
26 jq:
27 $("form ~ input")
28 result:
29 [ <input name="none" /> ]

 

三、过滤选择器

1．基本过滤选择器

（1）:first/:last选择器

选择同类元素中的第一个/最后一个元素

 1 <ul>
 2     <li>list item 1</li>
 3     <li>list item 2</li>
 4     <li>list item 3</li>
 5     <li>list item 4</li>
 6     <li>list item 5</li>
 7 </ul>
 8 
 9 
10 jq:
11 $(‘li:first‘);
12 
13 result:
14 [ <li>list item 1</li> ]
15 
16 jq:
17 $(‘li:last‘);
18 
19 result:
20 [ <li>list item 5</li> ]

 

（2）:not选择器

在原有的元素集合中排除指定类型的元素，然后重新获得元素集合

1 <input name="apple" />
2 <input name="flower" checked="checked" />
3 
4 jq:
5 $("input:not(:checked)")
6 result:
7 [ <input name="apple" /> ]

 

（3）:even和:odd选择器

选择同类元素中索引值为偶数/奇数的元素集合

 1 <table>
 2   <tr><td>Header 1</td></tr>
 3   <tr><td>Value 1</td></tr>
 4   <tr><td>Value 2</td></tr>
 5 </table>
 6 
 7 jq:
 8 $("tr:odd")
 9 result:
10 [ <tr><td>Value 1</td></tr> ]

 

（4）:eq，:gt，:lt 选择器

选择同类元素集合中元素索引值等于/大于/小于指定值的元素集合

 1 <table>
 2   <tr><td>Header 1</td></tr>
 3   <tr><td>Value 1</td></tr>
 4   <tr><td>Value 2</td></tr>
 5 </table>
 6 
 7 jq:
 8 $("tr:eq(1)")
 9 result:
10 [ <tr><td>Value 1</td></tr> ]
11 
12 jq:
13 $("tr:gt(1)")
14 result:
15 [ <tr><td>Value 2</td></tr> ]
16 
17 jq:
18 $("tr:lt(1)")
19 result:
20 [ <tr><td>Header 1</td></tr> ]

 

（5）:header选择器

（6）:animated选择器

2.内容过滤选择器

（1）:contains选择器

选择元素集合中，文本内容包含指定字符串的元素

1 <div>John Resig</div>
2 <div>George Martin</div>
3 <div>Malcom John Sinclair</div>
4 <div>J. Ohn</div>
5 
6 jq:
7 $("div:contains(‘John‘)")
8 result:
9 [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

 

（2）:empty选择器

选择元素集合中，文本内容为空的元素

1 <table>
2   <tr><td>Value 1</td><td></td></tr>
3   <tr><td>Value 2</td><td></td></tr>
4 </table>
5 
6 jq:
7 $("td:empty")
8 result:
9 [ <td></td>, <td></td> ]

 

（3）:has选择器

选择元素集合中，拥有指定元素类型的元素

1 <div><p>Hello</p></div>
2 <div>Hello again!</div>
3 
4 jq:
5 $("div:has(p)").addClass("test");
6 result:
7 [ <div class="test"><p>Hello</p></div> ]

 

（4）:parent选择器

选择元素集合的上级父类元素

1 <table>
2   <tr><td>Value 1</td><td></td></tr>
3   <tr><td>Value 2</td><td></td></tr>
4 </table>
5 
6 jq:
7 $("td:parent")
8 result:
9 [ <td>Value 1</td>, <td>Value 2</td> ]

 

3．可见性过滤选择器

（1）:hidden选择器

选择被隐藏的元素

（2）:visible选择器

选择可见的元素

 1 <table>
 2   <tr style="display:none"><td>Value 1</td></tr>
 3   <tr><td>Value 2</td></tr>
 4 </table>
 5 
 6 jq:
 7 $("tr:hidden")
 8 result:
 9 [ <tr style="display:none"><td>Value 1</td></tr> ]
10 
11 jq:
12 $("tr:visible")
13 result:
14 [ <tr><td>Value 2</td></tr> ]

 

4．属性过滤选择器

（1） [attribute]选择器

选择拥有指定属性的元素集合

1 <div>
2   <p>Hello!</p>
3 </div>
4 <div id="test2"></div>
5 
6 jq:
7 $("div[id]")
8 result:
9 [ <div id="test2"></div> ]

 

（2）[attribute=value]、[attribute!=value]选择器（此处包含两种）

选择拥有指定属性，并且属性值等于/不等于指定值的元素集合

 1 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
 2 <input type="checkbox" name="newsletter" value="Cold Fusion" />
 3 <input type="checkbox" name="accept" value="Evil Plans" />
 4 
 5 
 6 jq:
 7 $("input[name=‘newsletter‘]").attr("checked", true);
 8 result:
 9 [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
10 
11 jq:
12 $("input[name!=‘newsletter‘]").attr("checked", true);
13 result:
14 [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

 

（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种）

选择属性值以指定字符串开头/结尾；属性值包含指定字符串的元素

 1 <input name="newsletter" />
 2 <input name="milkman" />
 3 <input name="newsboy" />
 4 
 5 jq:
 6 $("input[name^=‘news‘]")
 7 result:
 8 [ <input name="newsletter" />, <input name="newsboy" /> ]
 9 
10 
11 <input name="newsletter" />
12 <input name="milkman" />
13 <input name="jobletter" />
14 
15 jq:
16 $("input[name$=‘letter‘]")
17 result:
18 [ <input name="newsletter" />, <input name="jobletter" /> ]
19 
20 
21 
22 <input name="man-news" />
23 <input name="milkman" />
24 <input name="letterman2" />
25 <input name="newmilk" />
26 
27 jq:
28 $("input[name*=‘man‘]")
29 result:
30 [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

 

（4）[selector][selector2]选择器

选择拥有多个指定属性值的元素

1 <input id="man-news" name="man-news" />
2 <input name="milkman" />
3 <input id="letterman" name="new-letterman" />
4 <input name="newmilk" />
5 
6 jq:
7 $("input[id][name$=‘man‘]")
8 result:
9 [ <input id="letterman" name="new-letterman" /> ]

 

5．子元素过滤选择器

（1）:nth-child选择器

选择同辈元素中索引值为指定值的元素

（2）:first-child、:last-child选择器（两种）

选择同辈元素中，第一个/最后一个元素

 1 <ul>
 2   <li>John</li>
 3   <li>Karl</li>
 4   <li>Brandon</li>
 5 </ul>
 6 <ul>
 7   <li>Glen</li>
 8   <li>Tane</li>
 9   <li>Ralph</li>
10 </ul>
11 
12 
13 jq:
14 $("ul li:nth-child(2)")
15 result:
16 [ <li>Karl</li>,   <li>Tane</li> ]
17 
18 
19 jq:
20 $("ul li:first-child")
21 result:
22 [ <li>John</li>, <li>Glen</li> ]
23 
24 
25 jq:
26 $("ul li:last-child")
27 result:
28 [ <li>Brandon</li>, <li>Ralph</li> ]

（3）:only-child选择器

选择没有同辈元素的元素

 1 <ul>
 2   <li>John</li>
 3   <li>Karl</li>
 4   <li>Brandon</li>
 5 </ul>
 6 <ul>
 7   <li>Glen</li>
 8 </ul>
 9 
10 jq:
11 $("ul li:only-child")
12 result:
13 [ <li>Glen</li> ]

 

6．表单对象属性过滤选择器

（1）:enabled、:disabled选择器

 1 <form>
 2   <input name="email" disabled="disabled" />
 3   <input name="id" />
 4 </form>
 5 
 6 jq:
 7 $("input:enabled")
 8 result:
 9 [ <input name="id" /> ]
10 
11 jq:
12 $("input:disabled")
13 result:
14 [ <input name="email" disabled="disabled" /> ]

 

（2）:checked选择器

 1 <form>
 2   <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
 3   <input type="checkbox" name="newsletter" value="Weekly" />
 4   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
 5 </form>
 6 
 7 
 8 jq:
 9 $("input:checked")
10 result:
11 [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

 

（3）:selected选择器

 1 <select>
 2   <option value="1">Flowers</option>
 3   <option value="2" selected="selected">Gardens</option>
 4   <option value="3">Trees</option>
 5 </select>
 6 
 7 jq:
 8 $("select option:selected")
 9 result:
10 [ <option value="2" selected="selected">Gardens</option> ]

 

7．表单对象类型过滤选择器

（1）:input，:text，:password，:radio，:checkbox 选择器

（2）:submit、:image、:reset、:button、:file选择器

（3）:hidden选择器

---

The end.

by Little

---