jQuery选择器详解与应用-CSDN博客

本文深入探讨jQuery选择器的基本概念、层级匹配、基本二、动画元素匹配等核心内容，提供丰富的实例演示与代码实现，旨在帮助开发者高效掌握jQuery选择器的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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