jQuery 常用选择器

parent ~ child： 在给定的父元素下匹配所有的子元素

示例：

<span style="font-weight: normal;"><form>  <label>Name:</label>  <input name="name" />  <fieldset>      <label>Newsletter:</label>      <input name="newsletter" /> </fieldset></form><input name="none" /></span>

匹配表单中所有的子级input元素

jQuery代码:

<span style="font-size: 14px; font-weight: normal;">$("form > input"）</span>

结果：

[ <input name="name" /> ]

prev ~ siblings ：  匹配prev元素之后的所有siblings元素

示例：

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

找到所有与表单同辈的input元素

jQuery代码:

<span style="font-size:14px;">$("form ~ input</span>

结果：

[ <input name="none" /> ]

prev + next :    匹配所有紧接在prev元素后的next元素

示例：

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

匹配所有跟在label后边的inputt元素

jQuery代码:

$("label + input")

结果：

[ <input name="name" />, <input name="newsletter" /> ]

:first    获取第一个元素

示例：

<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');

结果：

<span style="font-size:14px;">[ <li>list item 1</li> ]</span>

:last   获取最后个元素

示例：

<span style="font-size:14px;"><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></span>

获取匹配的最后个元素

jQuery代码:

$('li:last')

结果：

[ <li>list item 5</li> ]

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

示例：

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

查找所有未选中的input元素

jQuery代码:

<span style="font-size:14px;">$("input:not(:checked)")</span>

结果：

<span style="font-size:14px;">[ <input name="apple" /> ]</span>

:even    匹配所有索引值为偶数的元素，从0开始计数

示例：

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

查找表格的1、3、5...行（即索引值0、2、4...）

jQuery代码:

$("tr:even")

结果：

<span style="font-size:14px;">[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]</span>

:odd    匹配所有索引值为奇数的元素，从0开始计数

示例：

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

查找表格的2、4、6...行（即索引值1、3、5...）

jQuery代码:

$("tr:odd")

结果：

[ <tr><td>Value 1</td></tr> ]

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

示例：

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

查找第二行

jQuery代码:

<span style="font-size:14px;">$("tr:eq(2)")</span>

结果：

[ <tr><td>Value 2</td></tr> ]

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

示例：

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

查找第二第三行，即索引值是1和2，也就是比0大

jQuery代码:

<span style="font-size:14px;">$("tr:gt(0)")</span>

结果：

<span style="font-size:14px;">[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]</span>

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

示例：

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

查找第一二行，即索引值是0和1，也就是小于2

jQuery代码:

$("tr:lt(2)")

结果：

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

: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);});

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

示例：

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

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

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

[ <div class="test"><p>Hello</p></div> ]