在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元素内的所有元素