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

    还是自浅至深->

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、常用的元素选择实例

    后续补全。