jQuery 选择器类型

示例

在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(包括非a元素),分别是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>。second-link因为提供的因为索引1就像eq(1)(请注意,索引从0此处开始,因此在这里选择了第二个!)。

$("a:eq(1)")

带索引排除的选择

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

以下选择<a>元素,但classexample为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

  • 具有以下属性和值:attr2with value something,attr3with valuesomething

  • 具有以下状态:first-child和first-of-type

您还可以使用逗号分隔不同的选择器:

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

这将选择:

  • 所有<a>要素

  • 所有具有该类的元素 class1

  • 具有ID的元素 #someID


儿童和兄弟姐妹的选择

jQuery选择器通常遵循与CSS相同的约定,从而允许您以相同的方式选择子级和同级。

  • 要选择非直接孩子,请使用空格

  • 要选择直子,请使用 >

  • 要选择第一个之后的相邻同级,请使用 +

  • 要选择第一个之后的不相邻兄弟姐妹,请使用 ~


通配符选择

在某些情况下,我们希望选择所有元素,但是没有一个公共属性可供选择(类,属性等)。在这种情况下,我们可以使用*仅选择所有元素的选择器:

$('#wrapper *')    // 选择#wrapper元素内的所有元素