首页 > 代码库 > jQuery 选择器总结
jQuery 选择器总结
<style></style>
一、基本选择器
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
jQuery 选择器总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。