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