一、基本选择器
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