您的位置：首页 > Web前端 > JQuery

Jquery选择器完全总结

2016-06-06 00:00 537 查看
转载请注明出处：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、常用的元素选择实例
后续补全。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航