码迷，mamicode.com
首页 > Web开发 > 详细

Jquery选择器完全总结

时间：2016-05-24 12:12:40      阅读：215      评论：0      收藏：0      [点我收藏+]

标签：

转载请注明出处：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、常用的元素选择实例

    后续补全。


Jquery选择器完全总结

标签：

原文地址：http://blog.csdn.net/anxpp/article/details/51485899
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！