jQuery 選擇器總結

1、基本選擇器

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> ]

 

2、層級選擇器

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" /> ]

 

3、過濾選擇器

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