// 这里的selector表示具体的选择器
// 这里的index表示指定的索引值
jQuery( "selector:eq(index)" )

<div id="n1"><div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div>
</div>

现在，我们想要查找第2个div标签，则可以编写如下jQuery代码：


// 选择了id为n2的一个元素
$("div:eq(1)");

接着，获取匹配ul li选择器的元素中的第4个元素，则可以编写如下jQuery代码：

// 选择了id为n9的一个元素
$("ul li:eq(3)");

:gt(index)大于索引的元素

jQuery 选择器(:first-child)详解

jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(0)选择器。


<div id="n1">CodePlayer<div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5" class="c">item2</li><li id="n6" class="c">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div>
</div>

// 选择了id分别为n4、n9的两个元素
$("ul li:first-child");

jQuery 选择器(:only-child)详解

jQuery的:only-child选择器用于匹配作为父元素的唯一子元素的元素，将其封装为jQuery对象并返回。


<div id="n1"><div id="n2">CodePlayer--专注于编程开发技术分享<ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li></ul></div>
</div>

现在，我们想要查找不同父辈元素的最后一个div标签，则可以编写如下jQuery代码：

// 选择了id为n9的一个元素
$("ul li:only-child");

查找作为父元素的"独生子"的ul标签，则可以编写如下jQuery代码：

// 选择了id分别为n3、n8的两个元素
// n3的父元素n2虽然有自己的文本内容，但是只有n3这一个子元素，因此n3也算是唯一子元素
$("ul:only-child");

jQuery 选择器(:nth-child(n))详解

jQuery的:nth-child(n)选择器用于匹配作为父元素下的第n个(或特定顺序的)子元素的元素，将其封装为jQuery对象并返回。

• :nth-child(odd)表示匹配作为父元素的奇数(第1、3、5、7……个)子元素的元素；
• :nth-child(even)表示匹配作为父元素的偶数(第2、4、6、8……个)子元素的元素；
• :nth-child(3n)表示匹配作为父元素的第3n个子元素的元素(n表示包括0在内的自然数，下同)；
• :nth-child(3n+1)表示匹配作为父元素的第3n+1个子元素的元素；
• :nth-child(3n+2)表示匹配作为父元素的第3n+2个子元素的元素；

<div id="n1"><div id="n2"><ul id="n3"><li id="n4" class="c">item1</li><li id="n5">item2</li><li id="n6" class="c">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div>
</div>

现在，我们想要为每个ul标签内查找它的第2个li标签，则可以编写如下jQuery代码：

// 选择了id分别为n5、n10的两个元素
$("ul li:nth-child(2)");

接着，为每个ul标签查找自然顺序为奇数的li标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n6、n9的3个元素
$("ul li:nth-child(odd)");

jQuery 选择器(:nth-last-child(n))详解

<div id="n1"><div id="n2" class="abc"><label id="n3">label1</label><span id="n4">span1</span><span id="n5" class="abc">span2</span><span id="n6">span3</span></div><div id="n7"><span id="n8" class="abc">span1</span><span id="n9">span2</span></div>
</div>




现在，我们查找作为父元素的span类型子元素中的"长子"的span标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n8的两个元素
// n4虽然不是n2的第一个子元素，但它是n2所有span类型子元素中的第一个，因此可以匹配
$("span:first-of-type");

接着，查找所有包含类名abc的元素，而且它们必须是父元素的该类型子元素中的"长子"，则可以编写如下jQuery代码：

// 选择了id分别为n2、n8的两个元素
// .abc可以匹配id分别为n2、n5、n8的3个元素，n2是n1所有div类型子元素中的第一个，n8是n7所有span类型子元素中的第一个，但n5不是n2所有span类型子元素中的第一个，因此不能匹配n5。
$(".abc:first-of-type");

jQuery 选择器(:has(selector))详解

jQuery的:has(selector)选择器用于匹配所有包含selector元素的元素，将其封装为jQuery对象并返回。

<div id="n1"><p id="n2" class="test"><span id="n3" class="a">Hello</span><span id="n4">Hello</span></p><p id="n5" class="detail"><span id="n6" class="b codeplayer">World<span id="n7" class="a">http://365mini.com</span><span id="n8"></span><span id="n9"></span></span></p>
</div>

现在，我们想要在id为n1的div标签内查找所有包含span标签的元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n5、n6的3个元素
$("#n1 :has(span)");

接着，我们在id为n1的div标签内查找包含类名为b的span标签的元素，则可以编写如下jQuery代码：

// 选择了id为n5的一个元素
$("#n1 :has(span.b)");




jQuery 选择器(:not(selector))详解

jQuery的:not(selector)选择器用于排除所有与选择器selector匹配的元素，并将剩余的其他DOM元素封装为jQuery对象并返回。

<div id="n1"><div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div>
</div>

现在，我们想要查找除了id为n2的元素以外的所有元素，则可以编写如下jQuery代码：

// 选择除了id为n2的元素以外的所有元素，包括html、head、style、link、title、meta、script等
$(":not(#n2)"); // 这相当于 $("*:not(#n2)");

接着，查找所有ul标签中除了id为n5的li标签以外的所有li标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n6、n9、n10的4个元素
$("ul li:not(#n5)");

jQuery 选择器(:contains(text))详解

<div id="n1"><div id="n2"><span id="n3">张三</span><span id="n4">CodePlayer</span></div><div id="n5"><span id="n6">CodePlayer</span></div><div id="n7">CodePlayer</div>
</div>

现在，我们想要在id为n1的div标签内查找所有包含字符串"CodePlayer"的元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n4、n5、n6、n7的5个元素
// n5的子元素n6中包含"CodePlayer"，因此n5也会被计入在内
$("#n1 :contains(CodePlayer)");

接着，在id为n1的div标签内查找所有包含字符串"张三"的元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n3的两个元素
// n2的子元素n3包含"张三"，因此n2也会被计入在内
$("#n1 :contains(张三)");

jQuery 选择器(:empty)详解

空的元素，是指该元素既不包含子元素，也不包含文本内容(哪怕是空格或换行符，也算有文本内容)。


以下面这段HTML代码为例：

<div id="n1"><div id="n2"><span id="n3">张三</span><span id="n4"> </span></div><div id="n5"><span id="n6"></span></div><div id="n7"></div>
</div>

现在，我们想要查找id为n1的div标签内所有有内容的元素，则可以编写如下jQuery代码：

// 选择了id为n6的一个元素
$("#n1 :empty");

查找所有有内容的span标签，则可以编写如下jQuery代码：

// 选择了id为n6的一个元素
$("span:empty");

jQuery 选择器(:visible)详解

jQuery的:visible选择器用于匹配所有可见的元素，将其封装为jQuery对象并返回。


以下面这段HTML代码为例：

<div id="n1"><p id="n2" style="display: none;"></p><p id="n3"><span id="n4">CodePlayer</span><input id="n5" type="hidden" value="专注于编程开发技术分享"><span id="n6" style="visibility: hidden;">http://www.365mini.com</span><span id="n7" style="opacity: 0;">jQuery手册</span></p>
</div>

现在，我们想要在id为n1的div标签内查找所有可见的元素，则可以编写如下jQuery代码：

// 选择了id分别为n3、n4、n6、n7的4个元素
$("#n1 :visible");

在id为n1的div标签内查找所有可见的span标签，则可以编写如下jQuery代码：

// 选择了id分别为n4、n6、n7的3个元素
$("#n1 span:visible");

jquery 选择器（：hidden)详解

jQuery 选择器(:header)详解

以下面这段HTML代码为例：

<div id="n1"><h1 id="n2">标题1</h1><div id="n3"><h2 id="n4">标题2</h2></div><div id="n5"><h3 id="n6">标题3</h3><h3 id="n7">标题4</h3></div>
</div>

现在，我们想要查找所有的标题元素，则可以编写如下jQuery代码：

// 选择了id分别为n2、n4、n6、n7的4个元素
$(":header");

接着，查找id为n5的div标签内的所有标题元素，则可以编写如下jQuery代码：

// 选择了id分别为n6、n7的两个元素
$("#n5 :header");

jQuery 选择器(:focus)详解

jQuery的:focus选择器用于匹配当前获得焦点的元素，将其封装为jQuery对象并返回。


以下面这段HTML代码为例：

<div id="n1"><input name="name" type="text" label="姓名"><br><input name="age" type="text" label="年龄"><br><input name="cellphone" type="text" label="手机号码">
</div>
<div id="message"></div>

现在，我们为当前获得焦点的<input>元素显示提示信息，则可以编写如下jQuery代码：

// 当<input>元素获得焦点时，在#message中显示"请输入[姓名]"、"请输入[年龄]"等相应的提示信息。
$("input").on("focus blur", function(){var me = $(this);var msg = me.is(":focus") ? ("请输入[" + me.attr("label") + "]") : "";$("#message").html(msg);
});

jQuery 选择器([attribute])详解

jQuery的[attribute]选择器用于匹配所有具有指定属性的元素，将其封装为jQuery对象并返回


以下面这段HTML代码为例：

<div id="n1"><div id="n2"><ul id="n3"><li id="n4">item2</li><li id="n5" class="c" tabindex="3">item3</li></ul></div><div id="n6" class><ul id="n7"><li id="n8" class="">item1</li><li id="n9">item2</li></ul></div>
</div>

现在，我们想要查找所有具有class属性的元素，则可以编写如下jQuery代码：

// 选择了id分别为n5、n6、n8的3个元素
$("[class]");

接着，查找所有同时具有class属性和tabindex属性的元素，则可以编写如下jQuery代码：

// 选择了id为n5的一个元素
$("[class][tabindex]");

jQuery 选择器([attribute=value])详解

jQuery的[attribute=value]选择器用于匹配指定属性为指定值的所有元素，将其封装为jQuery对象并返回。


以下面这段HTML代码为例：

<div id="n1"><div id="n2"><input id="n3" name="id[]" type="checkbox" value="1" ><input id="n4" name="id[]" type="checkbox" value="2" ><input id="n5" name="id[]" type="checkbox" value="3" ></div><div id="n6"><ul id="n7"><li id="n8" dataId="5">item1</li><li id="n9">item2</li></ul></div>
</div>

现在，我们想要查找所有name属性为page_id[]的元素，则可以编写如下jQuery代码：

// 选择了id分别为n3、n4、n5的3个元素
$("[name='id[]']");

接着，查找所有dataId属性为5的元素，则可以编写如下jQuery代码：

// 选择了id为n8的一个元素
$("[dataId=5]");

jQuery 选择器([attribute!=value])详解

jQuery的[attribute!=value]选择器用于匹配指定属性不等于指定值的所有元素，将其封装为jQuery对象并返回。

<div id="n1"><div id="n2"><input id="n3" name="id[]" type="checkbox" value="1" ><input id="n4" name="id[]" type="checkbox" value="2" ><input id="n5" name="id[]" type="checkbox" value="3" ></div><div id="n6"><ul id="n7"><li id="n8" dataId="x[5]">item1</li><li id="n9">item2</li></ul></div>
</div>

现在，我们想要查找所有id属性不等于n3的元素，则可以编写如下jQuery代码：

// 选择了id不等于n3的所有元素(包括html、body、style、script、title等标签)
$("[id!=n3]");

接着，在id为n6的后代元素中查找所有dataId属性不等于x[5]的元素，则可以编写如下jQuery代码：

// 选择了id分别为n7、n9的两个元素
$("#n6 [dataId!='x[5]']");

jQuery 选择器([attribute^=value])详解

jQuery的[attribute^=value]选择器用于匹配指定属性以指定值开始的所有元素，将其封装为jQuery对象并返回。

jQuery 选择器([attribute$=value])详解

jQuery的[attribute$=value]选择器用于匹配指定属性以指定值结尾的所有元素，将其封装为jQuery对象并返回。

以下面这段HTML代码为例：

<div id="n1"><div id="n2"><input id="n3" name="id[]" type="checkbox" value="1" ><input id="n4" name="id[]" type="checkbox" value="2" ><input id="n5" name="id[]" type="checkbox" value="3" ></div><div id="n6"><ul id="n7"><li id="n8" dataId="x[5_1]">item1</li><li id="n9" dataId="x[5_2]">item2</li><li id="n10" dataId="x[6_1]">item3</li></ul></div>
</div>

现在，我们想要查找所有id属性以5结尾的元素，则可以编写如下jQuery代码：

// 选择了id为n5的一个元素
$("[id$=5]");

接着，查找dataId属性以_1]结尾的所有元素，则可以编写如下jQuery代码：

// 选择了id分别为n8、n10的两个元素
$("[dataId$='_1]']");

jQuery 选择器([attribute|=value])详解

jQuery的[attribute|=value]选择器用于匹配指定属性等于指定值或以指定值为前缀的所有元素，将其封装为jQuery对象并返回。这里的前缀，表示以指定值开头，与后面的部分以连线("-")进行连接。

以下面这段HTML代码为例：

<div id="n1"><div id="n2"><input id="n3" name="Code Player" type="checkbox" value="1" ><input id="n4" name="Code-Player" type="checkbox" value="2" ><input id="n5" name="CodePlayer" type="checkbox" value="3" ><input id="n6" name="Code" type="checkbox" value="4" ></div>
</div>

现在，我们想要查找所有name属性以Code为前缀的元素，则可以编写如下jQuery代码：

// 选择了id分别为n4、n6的两个元素
$("[name|=Code]");

以下面这段HTML代码为例：

<div id="n1"><div id="n2"><input id="n3" name="xid1" type="checkbox" value="1" ><input id="n4" name="yid2" type="checkbox" value="2" ><input id="n5" name="zid3" type="checkbox" value="3" ></div><div id="n6"><ul id="n7"><li id="n8" dataId="x[5_1]">item1</li><li id="n9" dataId="x[5_2]">item2</li><li id="n10" dataId="y[5_3]">item3</li></ul></div>
</div>

现在，我们想要查找所有name属性包含id的元素，则可以编写如下jQuery代码：

// 选择了id分别为n3、n4、n5的3个元素
$("[name*=id]");

接着，查找dataId属性包含[5的所有元素，则可以编写如下jQuery代码：

// 选择了id分别为n8、n9、n10的3个元素
$("[dataId*='[5']");

jQuery 选择器(:input)详解

jQuery的:input选择器用于匹配所有的表单控件元素，将其封装为jQuery对象并返回。

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" />  <input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16">Button</button></form>
</div>

现在，查找所有的表单信息元素，则可以编写如下jQuery代码：

// 选择了id分别为n3 ~ n16(除了n14)的13个元素
$(":input");

jQuery 选择器(:text)详解

jQuery的:text选择器用于匹配所有的单行文本框元素，将其封装为jQuery对象并返回。


<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" />  <input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16">Button</button></form>
</div>

现在，我们查找所有的单行文本框元素，即可编写如下jQuery代码：

// 选择了id为n12的一个元素
$(":text");

jQuery 选择器(:password)详解

jQuery的:password选择器用于匹配所有的密码框元素，将其封装为jQuery对象并返回。密码框就是type为password的input标签：<input type="password">。

jQuery 选择器(:radio)详解

jQuery的:radio选择器用于匹配所有的单选按钮元素，将其封装为jQuery对象并返回。

单选按钮就是type为radio的input标签：<input type="radio">。

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" />  <input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><radioarea id="n15"></radioarea><button id="n16">Button</button></form>
</div>

现在，我们查找所有的单选按钮元素，即可编写如下jQuery代码：

// 选择了id为n9的一个元素
$(":radio");

jQuery 选择器(:checkbox)详解

jQuery的:checkbox选择器用于匹配所有的复选框元素，将其封装为jQuery对象并返回。

复选框就是type为checkbox的input标签：<input type="checkbox">。

以下面这段HTML代码为例：

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="radio" /><input id="n9" type="radio" /><input id="n10" type="reset" />  <input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><radioarea id="n15"></radioarea><button id="n16">Button</button></form>
</div>

现在，我们查找所有的单行文本框元素，即可编写如下jQuery代码：

// 选择了id为n4的一个元素
$(":checkbox");

jQuery 选择器(:button)详解

jQuery的:button选择器用于匹配所有的按钮元素，将其封装为jQuery对象并返回。

这里的按钮指的是所有的button标签(不区分type)以及type为button的input标签：

以下面这段HTML代码为例：

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /><input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16" type="button">Button</button><button id="n17" type="submit">Submit</button><button id="n18" type="reset">Reset</button></form>
</div>

现在，我们查找所有的普通按钮(type="button"的input标签)和button标签，即可编写如下jQuery代码：

// 选择了id分别为n3、n16、n17、n18的4个元素
$(":button");

如果你只想匹配type为button的input标签，你可以编写如下jQuery代码：

// 选择了id为n3的一个元素
$("input:button");

jQuery 选择器(:submit)详解

jQuery的:submit选择器用于匹配所有的提交按钮元素，将其封装为jQuery对象并返回。

提交按钮框就是type为submit的input或button标签：<input type="submit">或<button type="submit"></button>。

以下面这段HTML代码为例：

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /><input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16" type="submit">Button</button></form>
</div>

现在，我们查找所有的提交按钮，即可编写如下jQuery代码：

// 选择了id分别为n11、n16的两个元素
$(":submit");

jQuery 选择器(:reset)详解

jQuery的:reset选择器用于匹配所有的重置按钮元素，将其封装为jQuery对象并返回。

重置就是type为reset的input或button标签：<input type="reset">或<button type="reset"></button>。

jQuery 选择器(:image)详解

jQuery的:image选择器用于匹配所有的图像控件，将其封装为jQuery对象并返回。

图像域就是type为image的input标签：<input type="image">。

jQuery 选择器(:enabled)详解

jQuery的:enabled选择器用于匹配所有可用的表单控件元素，将其封装为jQuery对象并返回。

可用的表单控件是指没有disabled属性的<input>、<button>、<select>、<textarea>、<option>等元素。

<div id="n1"><form id="n2"><label id="n3">CodePlayer</label><input id="n4" type="text" disabled="disabled" ><input id="n5" type="checkbox" /><input id="n6" type="password" /><button id="n7" type="button" disabled="disabled">Button</button><select id="n8"><option id="n9">item1</option><option id="n10" disabled="disabled">item2</option></select></form>
</div>

现在，我们查找所有的可用元素，即可编写如下jQuery代码：

// 选择了id分别为n5、n6、n8、n9的4个元素
$(":enabled");




jQuery 选择器(:checked)详解

<div id="n1"><form id="n2"><label id="n3">CodePlayer</label><input id="n4" type="text" disabled="disabled" ><input id="n5" type="checkbox" checked="checked" /><input id="n6" type="checkbox" /><input id="n7" type="radio" checked="checked" />     <input id="n8" type="radio" />       <button id="n9" type="button" disabled="disabled">Button</button><select id="n10"><option id="n11" selected="selected">item1</option><option id="n12">item2</option></select></form>
</div>

现在，我们查找所有的提交按钮，即可编写如下jQuery代码：

// 选择了id分别为n5、n7、n11的3个元素
// :checked可以匹配"selected"的option
$(":checked");

如果你只希望匹配选中的radio和checkbox，请使用input:checked。

// 选择了id分别为n5、n7的两个元素
$("input:checked");

如果你只希望匹配选中的checkbox，请使用:checkbox:checked。radio也是同理。

// 选择了id为n5的一个元素
$(":checkbox:checked");

jQuery 选择器(:selected)详解

jQuery的:selected选择器用于匹配所有选中的option元素，将其封装为jQuery对象并返回。

选中的option元素指的是具有selected属性的option标签。

<div id="n1"><form id="n2"><label id="n3">CodePlayer</label><input id="n4" type="text" disabled="disabled" ><input id="n5" type="checkbox" checked="checked" /><input id="n6" type="checkbox" /><input id="n7" type="radio" checked="checked" />     <input id="n8" type="radio" />       <button id="n9" type="button" disabled="disabled">Button</button><select id="n10"><option id="n11" selected="selected">item1</option><option id="n12">item2</option></select></form>
</div>

现在，我们查找所有选中的option元素，即可编写如下jQuery代码：

// 选择了id为n11的一个元素
$(":selected");