Jquery选择器完全总结

标签: Jquery选择器 选择器完全总结 Jquery选择器全解
19022人阅读 评论(4) 收藏 举报
分类:
转载请注明出处: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精讲

精讲jQuery前端技术,让你从此不惧前端处理!
  • 2015年04月23日 11:23

jQuery基础教程之强大的选择器(层次选择器)

无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(“backgrou...
  • wql19881207
  • wql19881207
  • 2012-03-31 13:52:41
  • 3558

jquery 用于选择多个元素的多选择器

在jquery中,你能够通过逗号,来分隔字符选择多个选择。 例如: $(.class1, .class2, #id1) 在以上的例子中,将会选择含有类名为class1,和class2及i...
  • taiyb
  • taiyb
  • 2014-10-24 23:52:58
  • 98833

jQuery-9种选择器

jQuery 9种选择器   1、基本选择器-5个    1 html> 2 head> 3 meta http-equiv="content-type" conte...
  • zfs592645357
  • zfs592645357
  • 2014-10-30 16:20:21
  • 1447

jQuery选择器总结介绍

jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回。本文主要对常用的jQuery选择器进行一个介绍及归类。最后给出一个具体的实例来介绍jQuer...
  • zhaozheng7758
  • zhaozheng7758
  • 2011-02-13 14:25:00
  • 2218

jQuery选择器总结

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是...
  • HandsomClass
  • HandsomClass
  • 2015-12-12 16:35:57
  • 545

jquery选择器总结[初步]

1.Jquery简介   Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML ...
  • NUPTboyZHB
  • NUPTboyZHB
  • 2013-08-31 10:19:17
  • 5297

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017-07-25 18:19:07
  • 3042

Jquery选择器总结

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档...
  • qq_21831899
  • qq_21831899
  • 2016-12-29 11:51:59
  • 103

jQuery选择器总结

选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 ...
  • dafei19910606
  • dafei19910606
  • 2016-09-03 08:56:27
  • 111
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 88万+
    积分: 5843
    排名: 5510
    博客专栏
    music