jQuery选择器完全总结

超、凢脫俗 2022-06-15 07:37 250阅读 0赞

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。

本文对jQuery选择器作一个总结。

## 1、说明 ##

通用语法：

$('具体的选择字符串');

>     选择结果可能是单个或多个对象。
> 
>     下面涉及到索引的，多是从0开始计数。
> 
>     如果选择器中包含特殊字符，可以用两个斜杠转义。

## 2、基本的选择器 ##

###      2.1、元素选择器（element） ###

html:

Jquery:

$("div");

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

###      2.2、ID选择器（\#id） ###

html:

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:

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:

Jquery:

$("form > input")

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

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

html:

Jquery:

$("label + input")

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

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

html:

Jquery:

$("form ~ input")

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

## 4、更近一步 ##

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

html：

Jquery：

$('li:first');

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

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

html：

Jquery：

$('li:last')

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

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

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

html：

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:

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:

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：

Jquery:

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

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

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

html：

Jquery：

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

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

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

html：

Jquery：

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

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

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

html：

Jquery：

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

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

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

html：

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：

Jquery：

$(":text")

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

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

html：

Jquery：

$(":password")

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

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

html：

Jquery：

$(":radio")

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

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

html：

Jquery：

$(":checkbox")

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

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

html：

Jquery：

$(":submit")

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

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

html：

Jquery：

$(":image")

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

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

html：

Jquery：

$(":reset")

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

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

html：

Jquery：

$(":button")

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

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

html：

Jquery：

$(":file")

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

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

html：

Jquery：

$("input:enabled")

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

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

html：

Jquery：

$("input:disabled")

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

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

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

html：

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

原文地址：[http://blog.csdn.net/anxpp/article/details/51485899][http_blog.csdn.net_anxpp_article_details_51485899]

[http_blog.csdn.net_anxpp_article_details_51485899]: http://blog.csdn.net/anxpp/article/details/51485899