选择器的类型

在 jQuery 中，你可以使用元素的许多不同属性选择页面中的元素，包括：

• 类型
• 类
• ID
• 拥有属性
• 属性值
• 索引选择器
• 伪状态

如果你了解 CSS 选择器， 你会注意到 jQuery 中的选择器是相同的（除了少数例外）。

以下面的 HTML 为例：

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

按类型选择：

以下 jQuery 选择器将选择所有 <a> 元素，包括 1,2,3 和 4。

$("a")

按类选择

以下 jQuery 选择器将选择类 example 的所有元素（包括非元素），即 3,4 和 5。

$(".example")

按 ID 选择

以下 jQuery 选择器将选择具有给定 ID 的元素，即 2。

$("#second-link")

通过占有属性进行选择

以下 jQuery 选择器将选择具有已定义的 href 属性的所有元素，包括 1 和 4。

$("[href]")

按属性值选择

以下 jQuery 选择器将选择 href 属性所在的所有元素，其值为 index.html，仅为 1。

$("[href='index.html']")

通过索引位置选择（ 索引选择器 ）

以下 jQuery 选择器将只选择 1，第二个 <a> ie。second-link 因为提供的索引是 1，如 eq(1)（注意索引从 0 开始，因此第二个在这里被选中！）。

$("a:eq(1)")

使用索引排除进行选择

使用索引:not(:eq()) 排除元素

以下选择 <a> 元素，除了类 example，即 1

$("a").not(":eq(0)")

选择排除

要从选择中排除元素，请使用:not()

以下选择 <a> 元素，但 example 类除外，它们分别为 1 和 2。

$("a:not(.example)")

通过伪状态选择

你也可以使用伪状态在 jQuery 中选择，包括:first-child，:last-child，:first-of-type，:last-of-type 等。

以下 jQuery 选择器将仅选择第一个 <a> 元素：数字 1。

$("a:first-of-type")

结合 jQuery 选择器

你还可以通过组合多个 jQuery 选择器来提高你的特异性; 你可以组合任意数量或组合所有这些。你还可以同时选择多个类，属性和状态。

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

这会选择一个 <a> 元素：

• 有以下类：class1, class2, and class3
• 有以下 ID：someID
• 具有以下属性：attr1
• 具有以下属性和值：attr2，其值为 something，attr3，其值为 something
• 有以下状态：first-child 和 first-of-type

你还可以使用逗号分隔不同的选择器：

$("a, .class1, #someID")  

这会选择：

• 所有 <a> 元素
• 所有具有 class1 类的元素
• id 为 #someID 的元素

儿童和兄弟姐妹的选择

jQuery 选择器通常符合与 CSS 相同的约定，允许你以相同的方式选择子节点和兄弟节点。

• 要选择非直接孩子，请使用空格
• 要选择直接孩子，请使用 >
• 要选择第一个之后的相邻兄弟，请使用+
• 要选择第一个之后的非相邻兄弟，请使用~

通配符选择

可能存在我们想要选择所有元素但没有选择的公共属性（类，属性等）的情况。在这种情况下，我们可以使用*选择器，它只选择所有元素：

$('#wrapper *')    // Select all elements inside #wrapper element