jQuery选择器上

1、jQuery选择器之基本一

1.1、#id

根据给定的ID匹配一个元素。

如果选择器中包含特殊字符，可以用两个斜杠(\\)转义。

参数：

id：用于搜索的，通过元素的id属性中给定的值。--String

示例：查找ID为"myDiv"的元素。

HTML代码：

<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id="myDiv"<div>

jQuery代码：

$("#myDiv");

结果：

[<div id="myDiv">id="myDiv"<div>]

1.2、element

根据给定的元素名匹配所有元素。返回值：Array<Element(s)>

参数：

element：一个用于搜索的元素。指向DOM节点的标签名。
示例：查找一个DIV元素。

HTML代码：

<div>DIV1</div><div>DIV2</div><span>SPAN</span>

jQuery代码：

$("div");

结果：

[<div>DIV1</div>, <div>DIV2</div>]

1.3、.class

根据给定的类匹配元素。返回值：Array<Element(s)>

参数：

class：一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

示例：查找所有类是“myClass”的元素。

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

1.4、*

匹配所有元素。返回值：Array<Element(s)>

多用于结合上下文来搜索。

示例：找到每个元素。

HTML代码：

<div>DIV</div><span>SPAN</span><p>P</p>

Jquery代码：

$("*");

结果：

[<div>DIV</div>, <span>SPAN</span>, <p>P</p>]

1.5、selector1, selector2, selectorN

将每一个选择器匹配到的元素合并后一起返回。返回值：Array<Element(s)>

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
参数：

selector1：一个有效的选择器。--Selector

selector2：另一个有效的选择器。--Selector

selectorN：(可选)任意多个有效的选择器。--Selector

示例：找到匹配任意一个类的元素。

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

2、jQuery选择器之层级

2.1、ancestor descendant

在给定的祖先元素下匹配所有的后代元素。返回值：Array<Element(s)>

参数：

ancestor：任何有效的选择器。--Selector

descendant：用以匹配元素的选择器，并且它是第一个选择器的后代元素。--Selector

示例：找到表单中所有的input元素。

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

2.2、parent > child

在给定的父元素下匹配所有的子元素。返回值：Array<Element(s)>
参数：

parent：任何有效的选择器。--Selector

child：用以匹配元素的选择器，并且它是第一个选择器的子元素。--Selector

示例：匹配表单中所有的子级input元素。

HTML代码同2.1中。

jQuery代码：

$("form > input");

结果：

[ <input name="name"/> ]

2.3、prev + next

匹配所有紧接在prev元素后的next元素。返回值：Array<Element<(s)>

参数：

prev：任何有效选择器。--Selector

next：一个有效选择器并紧跟着第一个选择器。--Selector

示例：匹配所有跟在label后面的input元素。

HTML代码同2.1中。
jQuery代码：

$("label + input");

结果：

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

2.4、prev ~ siblings

匹配prev元素之后的所有siblings元素。

参数：

prev：任何有效的选择器。--Selector

siblings：一个选择器，并且它作为第一个选择器的同辈。

示例：找到多有与表单同辈的input元素。

HTML代码同2.1中。

jQuery代码：

$("form ~ input");

结果：

[ <input name="none"/> ]

3、jQuery选择器之基本二

3.1、:first()

获取第一个元素。返回值：JQuery

示例：获取匹配的第一元素。

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

3.2、:last()

获取最后个元素。

示例：获取匹配的最后一个元素。

HTML代码参加3.1中。

jQuery代码：

$("li").last();

结果：

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

3.3、:not

去除所有与给定选择器匹配的元素。返回值：Array<Element(s)>

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

参数：selector：用于筛选的选择器。

示例：查找所有未选中的input元素。

HTML代码：

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

jQuery代码：

$("input:not(:checked)");

结果：

[ <input name="apple"/> ]

3.4、:even

匹配所有索引值为偶数的元素，从0开始计数。返回值：Array<Element(s)>

示例：查找表格的1、3、5...行(即索引值0、2、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> ]

3.5、:odd

匹配所有索引值为奇数的元素，从0开始计数。
示例参见:even示例。

3.6、:eq

匹配一个给定索引值得元素。返回值：Array<Element(s)>

参数：

index：从0开始计数。--Number

示例：查询第二行。

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

3.7、:gt

匹配所有大于给定索引值的元素。

参数：

index：从0开始计数。--Number

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

HTML代码参见上。

jQuery代码：

$("tr:gt(0)");

结果：

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

3.8、:lt

匹配所有小于给定索引值的元素。

参数：

index：从0开始计数。--Number

示例参见上。

3.9、:header

匹配如h1, h2, h3之类的表题元素。

示例：给界面中所有表题加上背景色。

HTML代码：

<h1>Header 1</h1><p>Contents 1</p><h2>Header 2</h2><p>Contents 2</p>

jQuery代码：

$(":header").css("background", "#EEE");

结果：

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

4.0、:animated

匹配所有正在执行动画效果的元素。返回值：Array<Element(s)>

示例：只有对不住执行动画效果到的元素执行一个动画特效。

HTML代码：

<button id="run">Run</button><div></iv>

jQuery代码：

$("#run").click(function(){  $("div:not(:animated)").animate({left:"+=20"}, 1000);});

jQuery选择器下：http://blog.csdn.net/tianyafeng123xin/article/details/50563783