Jquery選擇器完全總結

anxpp發表於2016-05-24
jQuery
轉載請註明出處：http://blog.csdn.net/anxpp/article/details/51485899，謝謝！

    額...現在需要寫很多前端的程式碼了，這裡就先記錄下Jquery的選擇器吧。

    還是自淺至深->

    CSDN自動生成的目錄是個好東西，很多東西只看目錄就夠了。

1、說明

    通用語法：

  1. $('具體的選擇字串');

    選擇結果可能是單個或多個物件。

    下面涉及到索引的，多是從0開始計數。

    如果選擇器中包含特殊字元，可以用兩個斜槓轉義。

    選擇器總覽：

基本的選擇器
     元素選擇器element
     ID選擇器#id
     類選擇器.class
     匹配所有元素通常用於結合上下文搜尋*
     根據多個規則獲取元素selector1,selector2,selectorN
層次結構中選取
     選取指定元素內所有匹配的元素ancestor descendant
     選擇指定父元素下匹配的子元素parent>child
     選擇所有緊接在指定元素後指定的匹配元素prev+next
     選擇指定元素之後的所有指定的匹配元素prev~siblings
更近一步
    獲取第一個元素:first
    獲取最後個元素:last
    去除所有與給定選擇器匹配的元素:not(selector)
    匹配所有索引值為偶數的元素:even
    匹配所有索引值為奇數的元素:old
    匹配一個給定索引值的元素:eq(index)
    匹配所有大於給定索引值的元素:gt(index)
    匹配所有小於給定索引值的元素:lt(index)
    選擇指定語言的所有元素:lang(language)
    匹配如 h1 h2 h3之類的標題元素:header
    匹配所有正在執行動畫效果的元素:animated
    匹配當前獲取焦點的元素:focus
    選擇該文件的根元素:root
    選擇由文件URI的格式化識別碼表示的目標元素:target
    匹配包含給定文字的元素:contains(text)
    匹配所有不包含子元素或者文字的空元素:empty
    匹配含有選擇器所匹配的元素的元素:has(selector)
    匹配含有子元素或者文字的元素:parent
    匹配所有不可見元素或者type為hidden的元素:hidden
    匹配所有的可見元素:visible
    匹配包含給定屬性的元素[attribute]
    匹配給定的屬性是某個特定值的元素[attribute=value]
    匹配所有不含有指定的屬性或屬性不等於特定值的元素[attribute!=value]
    匹配給定的屬性是以某些值開始的元素[attribute^=value]
    匹配給定的屬性是以某些值結尾的元素[attribute$=value]
    匹配給定的屬性是以包含某些值的元素[attribute*=value]
    複合屬性選擇器需要同時滿足多個條件時使用[selector1][selector2][selectorN]
    匹配第一個子元素:first-child
    選擇所有相同的元素名稱的第一個兄弟元素:first-of-type
    匹配最後一個子元素:last-child
    選擇的所有元素之間具有相同元素名稱的最後一個兄弟元素:last-of-type
    匹配其父元素下的第N個子或奇偶元素:nth-child
    選擇所有他們父元素的第n個(計數從最後一個元素開始到第一個)子元素:nth-last-child()
    選擇的所有他們的父級元素的第n個(計數從最後一個元素到第一個)子元素:nth-last-of-type()
    選擇同屬於一個父元素之下並且標籤名相同的子元素中的第n個:nth-of-type()
    如果某個元素是父元素中唯一的子元素那將會被匹配:only-child()
    選擇所有沒有兄弟元素且具有相同的元素名稱的元素:nth-last-of-type()
    匹配所有 input textarea select 和 button 元素:input
    匹配所有的單行文字框:text
    匹配所有密碼框:password
    匹配所有單選按鈕:radio
    匹配所有核取方塊:checkbox
    匹配所有提交按鈕:submit
    匹配所有影像域:image
    匹配所有重置按鈕:reset
    匹配所有按鈕:button
    匹配所有檔案域:file
    匹配所有可用元素:enabled
    匹配所有不可用元素:disabled
    匹配所有選中的被選中元素:checked
    匹配所有選中的option元素:selected

2、基本的選擇器

     2.1、元素選擇器（element）

    html:

  1. <div>DIV1</div>
  2. <div>DIV2</div>

    Jquery:

  1. $("div");

    結果：[<div>DIV1</div>,<div>DIV2</div>]

     2.2、ID選擇器（#id）

    html:

  1. <div id="div1"></div>

    Jquery:

  1. $("#div1");

     2.3、類選擇器（.class）

    html:

  1. <div class="notMe">div class="notMe"</div>
  2. <div class="myClass">div class="myClass"</div>
  3. <span class="myClass">span class="myClass"</span>

    Jquery:

  1. $(".myClass");

    結果：[<div class="myClass">div class="myClass"</div>,<span class="myClass">span class="myClass"</span>]

     2.4、匹配所有元素，通常用於結合上下文搜尋（*）

    html:

  1. <div>DIV</div>
  2. <span>SPAN</span>
  3. <p>P</p>

    Jquery:

  1. $("*")

    結果：[<div>DIV</div>,<span>SPAN</span>,<p>P</p>]

     2.5、根據多個規則獲取元素（selector1,selector2,selectorN）

    將每一個選擇器匹配到的元素合併後一起返回。你可以指定任意多個選擇器，並將匹配到的元素合併到一個結果內。

    html:

  1. <div>div</div>
  2. <p class="myClass">p class="myClass"</p>
  3. <span>span</span>
  4. <p class="notMyClass">p class="notMyClass"</p>

    Jquery:

  1. $("div,span,p.myClass")

    結果：[<div>div</div>,<p class="myClass">p class="myClass"</p>,<span>span</span>]

3、層次結構中選取

     3.1、選取指定元素內所有匹配的元素（ancestor descendant）

    html:

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

    Jquery:

  1. $("form input")

    結果：[<input name="name" />,<input name="newsletter" />]

     3.2、選擇指定父元素下匹配的子元素（parent > child）

    html:

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

    Jquery:

  1. $("form > input")

    結果：[<input name="name" />]

     3.3、選擇所有緊接在指定元素後指定的匹配元素（prev + next）

    html:

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

    Jquery:

  1. $("label + input")

    結果：[<input name="name" />,<input name="newsletter" />]

     3.4、選擇指定元素之後的所有指定的匹配元素（prev ~ siblings）

    html:

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

    Jquery:

  1. $("form ~ input")

    結果：[<input name="none" />]

4、更近一步

    4.1、獲取第一個元素（:first）

    html：

  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>

   Jquery：

  1. $('li:first');

    結果：[<li>list item 1</li>]

    4.2、獲取最後個元素（:last()）

    html：

  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>

   Jquery：

  1. $('li:last')

    結果：[<li>list item 5</li>]

    4.3、去除所有與給定選擇器匹配的元素（:not(selector)）

    在jQuery 1.3中，已經支援複雜選擇器了（例如:not(div a) 和 :not(div,a)）。

    html：

  1. <input name="apple" />
  2. <input name="flower" checked="checked" />

   Jquery：

  1. $("input:not(:checked)")

    結果：[<input name="apple" />]

    4.4、匹配所有索引值為偶數的元素

    html：

  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>

   Jquery：

  1. $("tr:even")

    結果：[<tr><td>Header 1</td></tr>,<tr><td>Value 2</td></tr>]

    4.5、匹配所有索引值為奇數的元素

    html：

  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>

   Jquery：

  1. $("tr:odd")

    結果：[<tr><td>Value 1</td></tr>]

    4.6、匹配一個給定索引值的元素（:eq(index)）

    html：

  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>

   Jquery：

  1. $("tr:eq(1)")

    結果：[<tr><td>Value 1</td></tr>]

    4.7、匹配所有大於給定索引值的元素（:gt(index)）

    html：

  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>

   Jquery：

  1. $("tr:gt(0)")

    結果：[<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>]

    4.8、匹配所有小於給定索引值的元素（:lt(index)）

    返回值：Array<Element(s)>

    html：

  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>

   Jquery：

  1. $("tr:lt(2)")

    結果：[<tr><td>Header 1</td></tr>,<tr><td>Value 1</td></tr>]

    4.9、選擇指定語言的所有元素（:lang(language)）

    :lang選擇器,匹配有一個語言值等於所提供的語言程式碼，或以提供的語言程式碼開始，後面馬上跟一個“ - ”的元素。例如，選擇器$("div:lang(en)")將匹配<div lang="en"> and <div lang="en-us">（和他們的後代<div>），但不包括<div lang="fr">

    對於HTML元素，語言值由lang屬性決定，也可能由來自meta元素或HTTP頭資訊決定。

    如，選擇所有<P> 的語言屬性：

  1. $("p:lang(it)")

    4.10、匹配如 h1, h2, h3之類的標題元素（:header）

    返回值：Array<Element(s)>

    html：

  1. <h1>Header 1</h1>
  2. <p>Contents 1</p>
  3. <h2>Header 2</h2>
  4. <p>Contents 2</p>

   Jquery：

  1. $(":header")

    結果：[<h1>Header 1</h1>,<h2>Header 2</h2>]

    4.11、匹配所有正在執行動畫效果的元素（:animated）

    返回值：Array<Element(s)>

    4.12、匹配當前獲取焦點的元素（:focus）

    如同其他偽類選擇器（那些以":"開始），建議:focus前面用標記名稱或其他選擇;否則，通用選擇("*")是不言而喻的。換句話說，$(':focus')等同為$('*:focus')。如果你正在尋找當前的焦點元素，$( document.activeElement )將檢索，而不必搜尋整個DOM樹。

    新增一個"focused"的類名給那些有focus方法的元素：

    css:

  1. .focused {    background: #abcdef;}

    html：

  1. <div id="content">
  2.     <input tabIndex="1">
  3.     <input tabIndex="2">
  4.     <select tabIndex="3">
  5.         <option>select menu</option>
  6.     </select>
  7.     <div tabIndex="4">
  8.         a div
  9.     </div>
  10. </div>

   Jquery：

  1. $( "#content" ).delegate( "*", "focus blur", function( event ) {
  2.     var elem = $( this );
  3.     setTimeout(function() {
  4.        elem.toggleClass( "focused", elem.is( ":focus" ) );
  5.     }, 0);
  6. });

    4.13、選擇該文件的根元素（:root）

    在HTML中，文件的根元素，和$(":root")選擇的元素一樣， 永遠是<html>元素。

    4.14、選擇由文件URI的格式化識別碼表示的目標元素（:target）

    如果文件的URI包含一個格式化的識別符號，或hash（雜湊）， 然後:target選擇器將匹配ID和識別符號相匹配的元素。 例如，給定的URI http://example.com/#foo， $( "p:target" )，將選擇<p id="foo">元素。

    4.15、匹配包含給定文字的元素（:contains(text)）

    html:

  1. <div>John Resig</div>
  2. <div>George Martin</div>
  3. <div>Malcom John Sinclair</div>
  4. <div>J. Ohn</div>

    Jquery:

  1. $("div:contains('John')")

    結果：[<div>John Resig</div>,<div>Malcom John Sinclair</div>]

    4.16、匹配所有不包含子元素或者文字的空元素（:empty）

    html:

  1. <table>
  2.   <tr><td>Value 1</td><td></td></tr>
  3.   <tr><td>Value 2</td><td></td></tr>
  4. </table>

    Jquery:

  1. $("td:empty")

    結果：[<td></td>,<td></td>]

    4.17、匹配含有選擇器所匹配的元素的元素（:has(selector)）

    html:

  1. <div><p>Hello</p></div>
  2. <div>Hello again!</div>

    Jquery:

  1. $("div:has(p)");

    結果：[<div><p>Hello</p></div>]

    4.18、匹配含有子元素或者文字的元素（:parent）

    html:

  1. <table>
  2.   <tr><td>Value 1</td><td></td></tr>
  3.   <tr><td>Value 2</td><td></td></tr>
  4. </table>

    Jquery:

  1. $("td:parent")

    結果：[<td>Value 1</td>,<td>Value 2</td>]

    4.19、匹配所有不可見元素，或者type為hidden的元素（:hidden）

    查詢隱藏的 tr：

    html:

  1. <table>
  2.   <tr style="display:none"><td>Value 1</td></tr>
  3.   <tr><td>Value 2</td></tr>
  4. </table>

    Jquery:

  1. $("tr:hidden")

    結果：[<tr style="display:none"><td>Value 1</td></tr>]

    匹配type為hidden的元素：

    html:

  1. <form>
  2.   <input type="text" name="email" />
  3.   <input type="hidden" name="id" />
  4. </form>

    Jquery:

  1. $("input:hidden")

    結果：[<input type="hidden" name="id" />]

    4.20、匹配所有的可見元素（:visible）

    html:

  1. <table>
  2.   <tr style="display:none"><td>Value 1</td></tr>
  3.   <tr><td>Value 2</td></tr>
  4. </table>

    Jquery:

  1. $("tr:visible")

    結果：[<tr><td>Value 2</td></tr>]

    4.21、匹配包含給定屬性的元素（[attribute]）

    注意，在jQuery 1.3中，前導的@符號已經被廢除！如果想要相容最新版本，只需要簡單去掉@符號即可。

    html:

  1. <div>
  2.   <p>Hello!</p>
  3. </div>
  4. <div id="test2"></div>

    Jquery:

  1. $("div[id]")

    結果：[<div id="test2"></div>]

    4.22、匹配給定的屬性是某個特定值的元素（[attribute=value]）

    html:

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

    Jquery:

  1. $("input[name='newsletter']")

    結果：[<input type="checkbox" name="newsletter" value="Hot Fuzz"  />,<input type="checkbox" name="newsletter" value="Cold Fusion" />]

    4.23、匹配所有不含有指定的屬性或屬性不等於特定值的元素（[attribute!=value]）

    此選擇器等價於:not([attr=value])。

    要匹配含有特定屬性但不等於特定值的元素，請使用[attr]:not([attr=value])。

    html：

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

    Jquery:

  1. $("input[name!='newsletter']")

    結果：[<input type="checkbox" name="accept" value="Evil Plans" /> ]

    4.24、匹配給定的屬性是以某些值開始的元素（[attribute^=value]）

    html：

  1. <input name="newsletter" />
  2. <input name="milkman" />
  3. <input name="newsboy" />

    Jquery：

  1. $("input[name^='news']")

    結果：[<input name="newsletter" />,<input name="newsboy" />]

    4.25、匹配給定的屬性是以某些值結尾的元素（[attribute$=value]）

    html：

  1. <input name="newsletter" />
  2. <input name="milkman" />
  3. <input name="jobletter" />

    Jquery：

  1. $("input[name$='letter']")

    結果：[<input name="newsletter" />,<input name="jobletter" />]

    4.26、匹配給定的屬性是以包含某些值的元素（[attribute*=value]）

    html：

  1. <input name="man-news" />
  2. <input name="milkman" />
  3. <input name="letterman2" />
  4. <input name="newmilk" />

    Jquery：

  1. $("input[name*='man']")

    結果：[<input name="man-news" />,<input name="milkman" />,<input name="letterman2" />]

    4.27、複合屬性選擇器，需要同時滿足多個條件時使用（[selector1][selector2][selectorN]）

    html：

  1. <input id="man-news" name="man-news" />
  2. <input name="milkman" />
  3. <input id="letterman" name="new-letterman" />
  4. <input name="newmilk" />

    Jquery：

  1. $("input[id][name$='man']")

    結果：[<input id="letterman" name="new-letterman" />]

    4.28、匹配第一個子元素（:first-child）

    html：

  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>

    Jquery：

  1. $("ul li:first-child")

    結果：[<li>John</li>,<li>Glen</li>]

    4.29、選擇所有相同的元素名稱的第一個兄弟元素（:first-of-type）

    :first-of-type 選擇器匹配元素，在文件樹中，相同的父元素並且在其他相同的元素名稱之前。

    4.30、匹配最後一個子元素（:last-child）

    html：

  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>

    Jquery：

  1. $("ul li:last-child")

    結果：[<li>Brandon</li>,<li>Ralph</li>]

    4.31、選擇的所有元素之間具有相同元素名稱的最後一個兄弟元素（:last-of-type）

    :last-of-type 選擇器匹配在文件樹中具有相同的父元素並且相同的元素名稱，後面沒有任何其他元素 的元素。

    4.32、匹配其父元素下的第N個子或奇偶元素（:nth-child）

    ':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

    html：

  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>

    Jquery：

  1. $("ul li:nth-child(2)")

    結果：[<li>Karl</li>,<li>Tane</li>]

    4.33、選擇所有他們父元素的第n個（計數從最後一個元素開始到第一個）子元素（:nth-last-child(n|even|odd|formula)）v1.9

    因為jQuery的實現:nth-child(n)是嚴格來自CSS規範，所以n值是“1索引”，也就是說，從1開始計數。對於所有其他選擇器表示式，jQuery遵循JavaScript的“0索引”的計數。因此，給定一個單一<ul>包含兩個<li>， $('li:nth-child(1)')選擇第一個<li>，而$('li:eq(1)')選擇第二個。

    比如下面選擇倒數第二個：

  1. <ul>
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5.     <li>4</li>
  6. </ul>
  7. $("ul li:nth-last-child(2)");

    4.34、選擇的所有他們的父級元素的第n個（計數從最後一個元素到第一個）子元素（:nth-last-of-type(n|even|odd|formula)）

    因為jQuery的實現:nth-是嚴格來自CSS規範，n值是“1-indexed”，也就是說，從1開始計數。 對於所有其他選擇器表示式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的計數。因此，給定一個單一<ul>包含3個<li>，$('li:nth-last-of-type(1)')選擇第3個，也就是最後一個<li>。

    選擇倒數第二個：

  1. <ul>
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5.     <li>4</li>
  6. </ul>
  7. $("ul li:nth-last-of-type(2)");

    4.35、選擇同屬於一個父元素之下，並且標籤名相同的子元素中的第n個（:nth-of-type(n|even|odd|formula)）

    因為jQuery的實現:nth-是嚴格來自CSS規範，n值是“1-indexed”，也就是說，從1開始計數。對於所有其他選擇器表示式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的計數。

    查詢每個span，這個 span 是 其所有兄弟span元素中的第二個元素：

  1. <div>
  2.   <span>John</span>
  3.   <b>Kim</b>
  4.   <span>Adam</span>
  5.   <b>Rafael</b>
  6.   <span>Oleg</span>
  7. </div>
  8. <div>
  9.   <b>Dave</b>
  10.   <span>Ann</span>
  11. </div>
  12. <div>
  13.   <i><span>Maurice</span></i>
  14.   <span>Richard</span>
  15.   <span>Ralph</span>
  16.   <span>Jason</span>
  17. </div>
  18. $("span:nth-of-type(2)");

    4.36、如果某個元素是父元素中唯一的子元素，那將會被匹配（:only-child）

    如果父元素中含有其他元素，那將不會被匹配。

    html：

  1. <ul>
  2.   <li>John</li>
  3.   <li>Karl</li>
  4.   <li>Brandon</li>
  5. </ul>
  6. <ul>
  7.   <li>Glen</li>
  8. </ul>

    Jquery：

  1. $("ul li:only-child")

    結果：[<li>Glen</li>]

    4.37、選擇所有沒有兄弟元素，且具有相同的元素名稱的元素（:nth-last-of-type）

    如果父元素有相同的元素名稱的其他子元素，那麼沒有元素會被匹配。

    改變每一個按鈕的文字，並且加一個邊框，這些按鈕的父元素只有這個按鈕子元素：

  1. <div>
  2.   <button>Sibling!</button>
  3.   <button>Sibling!</button>
  4. </div>
  5.  <div>
  6.   <button>Sibling!</button>
  7. </div>
  8. <div>  None</div>
  9.  <div>
  10.   <button>Sibling!</button>
  11.   <span>Sibling!</span>
  12.   <span>Sibling!</span>
  13.  </div>
  14. <div>
  15.   <button>Sibling!</button>
  16. </div>
  17. $("button:only-of-type").text("Alone").css("border", "2px blue solid");

    4.37、匹配所有 input, textarea, select 和 button 元素（:input）

    html：

  1. <form>
  2.     <input type="button" value="Input Button"/>
  3.     <input type="checkbox" />
  4.     <input type="file" />
  5.     <input type="hidden" />
  6.     <input type="image" />
  7.     <input type="password" />
  8.     <input type="radio" />
  9.     <input type="reset" />
  10.     <input type="submit" />
  11.     <input type="text" />
  12.     <select><option>Option</option></select>
  13.     <textarea></textarea>
  14.     <button>Button</button>
  15. </form>

    Jquery：

  1. $(":input")

    結果：

  1. [   <input type="button" value="Input Button"/>,
  2.     <input type="checkbox" />,
  3.     <input type="file" />,
  4.     <input type="hidden" />,
  5.     <input type="image" />,
  6.     <input type="password" />,
  7.     <input type="radio" />,
  8.     <input type="reset" />,
  9.     <input type="submit" />,
  10.     <input type="text" />,
  11.     <select><option>Option</option></select>,
  12.     <textarea></textarea>,
  13.     <button>Button</button>, ]

    4.38、匹配所有的單行文字框（:text）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":text")

    結果：[<input type="text" />]

    4.39、匹配所有密碼框（:password）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":password")

    結果：[<input type="password" />]

    4.40、匹配所有單選按鈕（:radio）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":radio")

    結果：[<input type="radio" />]

    4.41、匹配所有核取方塊（:checkbox）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":checkbox")

    結果：[<input type="checkbox" />]

    4.42、匹配所有提交按鈕（:submit）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":submit")

    結果：[<input type="submit" />]

    4.43、匹配所有影像域（:image）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":image")

    結果：[<input type="image" />]

    4.44、匹配所有重置按鈕（:reset）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":reset")

    結果：[<input type="reset" />]

    4.45、匹配所有按鈕（:button）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":button")

    結果：[ <input type="button" />,<button></button> ]

    4.46、匹配所有檔案域（:file）

    html：

  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>

    Jquery：

  1. $(":file")

    結果：[ <input type="file" /> ]

    4.47、匹配所有可用元素（:enabled）

    html：

  1. <form>
  2.   <input name="email" disabled="disabled" />
  3.   <input name="id" />
  4. </form>

    Jquery：

  1. $("input:enabled")

    結果：[ <input name="id" /> ]

    4.48、匹配所有不可用元素（:disabled）

    html：

  1. <form>
  2.   <input name="email" disabled="disabled" />
  3.   <input name="id" />
  4. </form>

    Jquery：

  1. $("input:disabled")

    結果：[ <input name="email" disabled="disabled" /> ]

    4.49、匹配所有選中的被選中元素（:checked）

    核取方塊、單選框等，不包括select中的option。

    html：

  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>

    Jquery：

  1. $("input:checked")

    結果：[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

    4.50、匹配所有選中的option元素（:selected）

    html：

  1. <select>
  2.   <option value="1">Flowers</option>
  3.   <option value="2" selected="selected">Gardens</option>
  4.   <option value="3">Trees</option>
  5. </select>

    Jquery：

  1. $("select option:selected")

    結果：[ <option value="2" selected="selected">Gardens</option> ]

5、常用的元素選擇例項

    後續補全。


相關文章