選擇器
一、選擇器分類
jQuery的選擇器和CSS的選擇器非常相似
大致可以分為幾類：
基本篩選器： eq get first lang It not odd root...
內容篩選器： contains empty has parent...
可見篩選器： hidden visible
子元素篩選器： first-child nth-child only-child...
表單： bottom checkbox foucs input text...
二、選擇器API
id
$(`#app`)
/* 如果含有特殊字元 */
$(`#app\:ip`) ==> id="app:ip"class
$(`.class`)element
$(`div`)*
$(`*`)
/*匹配全部 */selector1,selector2,selector3
$(`div,#div,.class,span.love`)parent selector （祖先和後代的關係）
/* 指定的祖先元素下的所有的後代元素 */
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$(`form input`)
/* result */
/* [ <input name="name" />, <input name="newsletter" /> ] */parent > child （父親和兒子的關係）
/* 匹配父元素下的所有的子元素 */
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$(`form > input`)
/* result */
/* [ <input name="name" /> ] */prev + next （下一個兄弟關係）
/* 匹配所有跟在prev後面的下一個元素 */
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$(`label + input`)
/* result */
/* [ <input name="name" />, <input name="newsletter" /> ] */prev ~ siblings (下面的所有兄弟元素)
/* 匹配prev後面的所有的兄弟元素 */
<form>
<label id="name">Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
<input name="none" />
<input name="sex" />
</form>
$(`#name ~ input`)
/* result */
/* <input name="name" />
<input name="none" />
<input name="sex" /> */:first
獲取匹配的第一個元素
$(`input:first`)
$(`ul li:first`);
// 捕獲到同型別元素後，在取其第一個:not(selector)
去除選定的selector那部分
// 去除已選擇的元素中的部分
$(`input:not(:checked)`)
<input name="apple" />
<input name="flower" checked="checked" />
// result
// [ <input name="apple" /> ]:even(index)
// 匹配索引為偶數的，從 0 開始計數（將0包含進even）
// 第 1，3，5，7 行
//
$(`tr:even`):odd(index)
// 匹配索引為奇數的
// 第2，4，6，8 行
:eq(index)
// 匹配給定一個索引
$(`tr:eq(1)`)
:gt(index)
// 匹配大於索引值的項
$(`tr:gt(1)`):lang(language) 1.9+
// 匹配指定語言的元素
$(`div:lang(en)`)
// 選擇器$("div:lang(en)")將匹配<div lang="en"> and <div lang="en-us">（和他們的後代<div>），但不包括<div lang="fr">:last
// 獲取匹配的最後個元素
$(`div:last`):lt(index)
// 匹配索引小於指定值
//
$(`div:lt(4)`):header
// 匹配所有的標題元素
// h1 h2 h3 h4 h5 h6
$(":header").css("background", "#EEE");
:animated
// 匹配所有正在執行動畫的元素
<button id="run">Run</button><div></div>
$(`div:not(:animated)`).animate({
left: `+=20px`
},1000);:focus 1.6+
// 匹配當前獲取焦點的元素。
$(`input:focus`).css("background":"#ccc");:root 1.9+
// 匹配頁面的根元素
$(`:root`).css("background":"yellow");
// 設定<html>背景顏色為黃色:target 1.9+
// 如果url中包含有http://example.com/#foo
$(`a:target`)
// 就是選中了 <a id="foo"></a>:contains(text)
// 匹配包含給定文字的
$(`div:contains(`join`)`);
:empty()
$(`div:empty`)
// 匹配不包含子元素或文字內容
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$(`td:empty`)
// [ <td></td>, <td></td> ]:has()
// 匹配含有has內部選擇器選中的元素的元素
$(`div:has(`p`)`):parent 與empty相反
// 匹配含有子元素或者文字內容的
$(`td:parent`)
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
// <td>Value 1</td><td>Value 2</td>:hidden
// 匹配不可見的元素
//
$(`input:hidden`):visable
// 匹配可見的元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$(`tr:visable`)
// <tr><td>Value 2</td></tr> ][attribute]
// 匹配包含給定屬性的元素
$(`input[name]`)[attribute=value]
// 匹配給定的屬性是某個特定值的元素
$(`input[name="sex"]`)[attribute!=value]
[attribute^=vlaue]
// 匹配屬性以value開頭[attribute$=value]
// 匹配屬性以value結尾[attribute*=value]
// 匹配屬性包含某些值的元素selector1[selector3]
// 匹配同時滿足多個屬性選擇器的元素
$("input[id][name$=`man`]"):first-child
// 匹配所給選擇器( :之前的選擇器)的第一個子元素，最終的結果可能是多個，不同於:first 之處是，:first是指匹配到的元素（：之前的元素）的第一個。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$(`ul li:first-child`);
// [ <li>John</li>, <li>Glen</li> ]:first-of-type
// [1]
$(`span:first-of-type`)
// 匹配到span元素，而且這個span元素是其父級的第一個span
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
// <span id="n4">span1</span> <span id="n8" class="abc">span1</span>
// 【2】
$(`.abc:first-of-type`)
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
// <div id="n2" class="abc"></div> <span id="n8" class="abc">span1</span>:last-child
同理:first-child
:last-of-type
:nth-child(n)
n可以是：
序號、even、odd、（3n+2）
(3n+2)表示從第二個開始，匹配3的倍數的元素
// 這裡的n是從1 開始的，跟:first-child類似
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$(`ul li:nth-child(2)`)
// <li>Karl</li><li>Tane</li>:nth-last-child(n)
n可以是：
序號、even、odd、（3n+2）
(3n+2)表示從第二個開始，匹配3的倍數的元素
跟:nth-child(n) 類似，只是它是從後往前算的
only-child
// 如果某個元素是父元素中唯一的子元素，那將會被匹配
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
$(`ul li:only-child`)
// <li>Glen</li>:input
匹配所有 input, textarea, select 和 button 元素
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
// 全選$(`:input`):text
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(`:text`)
// <input type="text" />:password
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(`:password`)
// <input type="password" />:radio
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(`:radio`)
// <input type="radio" />:submit
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(`:submit`)
// <input type="submit" />:image
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(`:image`)
// <input type="image" />:reset
:button
:file
:enabled
選擇可用的元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled")
// <input name="id" />:disabled
選擇不能使用的
:checked
$("input:checked"):selected
$(`option:selected`)