Jquery选择器完全总结

最新推荐文章于 2023-10-19 15:17:55 发布

anxpp

最新推荐文章于 2023-10-19 15:17:55 发布

阅读量2w

点赞数 4

分类专栏：网页前端—————JQuery — 文章标签： Jquery选择器选择器完全总结 Jquery选择器全解

本文链接：https://blog.csdn.net/anxpp/article/details/51485899

版权

网页前端—————JQuery — 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

转载请注明出处：http://blog.csdn.net/anxpp/article/details/51485899，谢谢！

额...现在需要写很多前端的代码了，这里就先记录下Jquery的选择器吧。

还是自浅至深->

CSDN自动生成的目录是个好东西，很多东西只看目录就够了。

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:

 
 <div>DIV1</div>
<div>DIV2</div>

Jquery:

 
 $("div");

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

2.2、ID选择器（#id）

html:

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

Jquery:

 
 $("#div1");

2.3、类选择器（.class）

html:

 
 <div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

Jquery:

 
 $(".myClass");

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

2.4、匹配所有元素，通常用于结合上下文搜索（*）

html:

 
 <div>DIV</div>
<span>SPAN</span>
<p>P</p>

Jquery:

 
 $("*")

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

2.5、根据多个规则获取元素（selector1,selector2,selectorN）

将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

html:

 
 <div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

Jquery:

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

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

3、层次结构中选取

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

html:

 
 <form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery:

 
 $("form input")

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

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

html:

 
 <form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery:

 
 $("form > input")

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

3.3、选择所有紧接在指定元素后指定的匹配元素（prev + next）

html:

 
 <form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery:

 
 $("label + input")

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

3.4、选择指定元素之后的所有指定的匹配元素（prev ~ siblings）

html:

 
 <form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery:

 
 $("form ~ input")

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

4、更近一步

4.1、获取第一个元素（:first）

html：

 
 <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

Jquery：

 
 $('li:first');

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

4.2、获取最后个元素（:last()）

html：

 
 <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

Jquery：

 
 $('li:last')

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

4.3、去除所有与给定选择器匹配的元素（:not(selector)）

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）。

html：

 
 <input name="apple" />
<input name="flower" checked="checked" />

Jquery：

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

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

4.4、匹配所有索引值为偶数的元素

html：

 
 <table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

Jquery：

 
 $("tr:even")

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

4.5、匹配所有索引值为奇数的元素

html：

 
 <table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

Jquery：

 
 $("tr:odd")

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

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

html：

 
 <table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

Jquery：

 
 $("tr:eq(1)")

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

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

html：

 
 <table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

Jquery：

 
 $("tr:gt(0)")

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

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

返回值：Array<Element(s)>

html：

 
 <table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

Jquery：

 
 $("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> 的语言属性：

 
 $("p:lang(it)")

4.10、匹配如 h1, h2, h3之类的标题元素（:header）

返回值：Array<Element(s)>

html：

 
 <h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

Jquery：

 
 $(":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:


  
  .focused {    background: #abcdef;}

html：

 
 <div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

Jquery：

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

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:

 
 <div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

Jquery:

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

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

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

html:

 
 <table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

Jquery:

 
 $("td:empty")

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

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

html:

 
 <div><p>Hello</p></div>
<div>Hello again!</div>

Jquery:

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

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

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

html:

 
 <table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

Jquery:

 
 $("td:parent")

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

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

查找隐藏的 tr：

html:

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

Jquery:

 
 $("tr:hidden")

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

匹配type为hidden的元素：

html:

 
 <form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

Jquery:

 
 $("input:hidden")

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

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

html:

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

Jquery:

 
 $("tr:visible")

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

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

注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

html:

 
 <div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

Jquery:

 
 $("div[id]")

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

4.22、匹配给定的属性是某个特定值的元素（[attribute=value]）

html:

 
 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

Jquery:

 
 $("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：

 
 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

Jquery:

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

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

4.24、匹配给定的属性是以某些值开始的元素（[attribute^=value]）

html：

 
 <input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

Jquery：

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

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

4.25、匹配给定的属性是以某些值结尾的元素（[attribute$=value]）

html：

 
 <input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

Jquery：

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

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

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

html：

 
 <input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

Jquery：

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

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

4.27、复合属性选择器，需要同时满足多个条件时使用（[selector1][selector2][selectorN]）

html：

 
 <input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

Jquery：

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

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

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

html：

 
 <ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

Jquery：

 
 $("ul li:first-child")

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

4.29、选择所有相同的元素名称的第一个兄弟元素（:first-of-type）

:first-of-type 选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前。

4.30、匹配最后一个子元素（:last-child）

html：

 
 <ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

Jquery：

 
 $("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：

 
 <ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

Jquery：

 
 $("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)')选择第二个。

比如下面选择倒数第二个：

 
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
$("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>。

选择倒数第二个：

 
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
$("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元素中的第二个元素：

 
 <div>
  <span>John</span>
  <b>Kim</b>
  <span>Adam</span>
  <b>Rafael</b>
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>
  <span>Richard</span>
  <span>Ralph</span>
  <span>Jason</span>
</div>
$("span:nth-of-type(2)");

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

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

html：

 
 <ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>

Jquery：

 
 $("ul li:only-child")

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

4.37、选择所有没有兄弟元素，且具有相同的元素名称的元素（:nth-last-of-type）

如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

改变每一个按钮的文字，并且加一个边框，这些按钮的父元素只有这个按钮子元素：

 
 <div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 <div>
  <button>Sibling!</button>
</div>
<div>  None</div>
 <div>
  <button>Sibling!</button>
  <span>Sibling!</span>
  <span>Sibling!</span>
 </div>
<div>
  <button>Sibling!</button>
</div>
$("button:only-of-type").text("Alone").css("border", "2px blue solid");

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

html：

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

Jquery：

 
 $(":input")

结果：

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

4.38、匹配所有的单行文本框（:text）

html：

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

Jquery：

 
 $(":text")

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

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

html：

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

Jquery：

 
 $(":password")

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

4.40、匹配所有单选按钮（:radio）

html：

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

Jquery：

 
 $(":radio")

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

4.41、匹配所有复选框（:checkbox）

html：

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

Jquery：

 
 $(":checkbox")

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

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

html：

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

Jquery：

 
 $(":submit")

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

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

html：

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

Jquery：

 
 $(":image")

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

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

html：

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

Jquery：

 
 $(":reset")

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

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

html：

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

Jquery：

 
 $(":button")

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

4.46、匹配所有文件域（:file）

html：

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

Jquery：

 
 $(":file")

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

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

html：

 
 <form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

Jquery：

 
 $("input:enabled")

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

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

html：

 
 <form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

Jquery：

 
 $("input:disabled")

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

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

复选框、单选框等，不包括select中的option。

html：

 
 <form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

Jquery：

 
 $("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：

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

Jquery：

 
 $("select option:selected")

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

5、常用的元素选择实例

后续补全。

anxpp

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
4
评论
Jquery选择器完全总结

基本的选择器元素选择器element ID选择器#id 类选择器.class 匹配所有元素通常用于结合上下文搜索* 根据多个规则获取元素selector1,selector2,selectorN层次结构中选取选取指定元素内所有匹配的元素ancestor descendant 选择指定父元素下匹配的子元素parent>child 选择所有紧接在指定元素后指定的匹配元素prev+next 选择指定元素之后的所有指定的
复制链接

扫一扫