3.2.4 以伪类选择器访问DOM元素

发表于 更新于 分类于 ， ， Waline： 本文字数： 7.7k 阅读时长 ≈ 7 分钟

3.2.4 以伪类选择器访问DOM元素

伪类选择符

下面介绍的这些伪类选择器的意义基本等同于CSS 3 中所定义的伪类选择器,在使用这些伪类选择器时通常会结合使用前面介绍的选择器,前面的选择器往往可以匹配一个以上的HTML 元素,而以下伪类选择器则用于增加额外的限制。但在某些情况下,jQuery 也可以直接使用伪类选择器来获取DOM元素。

索引相关伪类选择符

选择符 描述
:first 返回由匹配指定选择器第一个HTML元素包装成的jQuery对象。
:last 返回由匹配指定选择器最后一个HTML元素包装成的jQuery对象。
:parent 返回由匹配指定选择器且包含子元素或者文本的所有HTML 元素包装成的jQuery对象。
:even 返回由匹配指定选择器且索引为奇数的HTML元素包装成的jQuery对象。元素索引从0开始。
:odd 返回由匹配指定选择器且索引为偶数的HTML元素包装成的jQuery对象。
:eq(index) 返回由匹配指定选择器且**索引为index**的HTML元素包装成的jQuery对象。
:gt(index) 返回由匹配指定选择器且**索引大于index**的所有HTML元素包装成的jQuery对象。
:lt(index) 返回由匹配指定选择器且**索引小于index**的所有HTML元素包装成的jQuery对象。

内容相关的伪类选择符

选择符 描述
:lang(lang_code) 返回由匹配指定选择器且指定了对应语言代码的HTML元素包装成的jQuery 对象。如果单独使用该伪类选择器,将返回由所有指定了对应语言代码的HTML元素包装成的jQuery对象。
:contains(text) 返回由匹配指定选择器且包含text文本的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有包含text文本的HTML元素包装成的jQuery对象。
:empty 返回由匹配指定选择器且不包含任何内容(包含字符串也不行)的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有不包含任何内容(包含字符串也不行)的HTML元素包装成的jQuery对象。

包内其他内容相关的选择符

选择符 描述
:not(selector) 返回由匹配指定选择器但去除selector选择器匹配的HTML 元素的所有HTML元素包装成的jQuery对象。
:has(selector) 返回由匹配指定选择器且包含selector对应HTML元素的所有HTML元素包装成的jQuery对象。注意::has(selector)限定不是返回selector所匹配的HTML元素,而是返回由包含selector所匹配HTML元素的HTML元素包装成的jQuery对象。

可见性相关的伪类选择符

选择符 描述
:hidden 返回由匹配指定选择器且当前不可见的HTML元素包装成的jQuery对象。
:visible 返回由匹配指定选择器且当前可见的HTML元素包装成的jQuery对象。

其他

选择符 描述
:animated 返回由匹配指定选择器且当前正在执行动画效果的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有正在执行动画效果的HTML元素包装成的jQuery对象。
:target 返回由正在被访问的命名锚点的目标元素包装成的jQuery对象。
:focus 返回由匹配指定选择器且当前获得焦点的HTML元素包装成的jQuery对象。如果单独使用该伪类选择器,将返回由所有当前获得焦点的HTML 元素包装成的jQuery对象。

程序示例

下面的代码示范了以上伪类选择器的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 使用jQuery()函数 </title>
    <style type="text/css">
        .test {
            font-size: 20pt;
        }
    </style>
</head>
<body>
    <ul>
        <li id="java">疯狂Java讲义</li>
        <li id="javaee" class="test">轻量级Java EE企业应用实战</li>
        <li id="ajax">疯狂前端开发讲义</li>
        <li id="xml">疯狂XML讲义</li>
        <li id="ejb">经典Java EE企业应用实战</li>
        <li>
            <span id="android">疯狂Android讲义</span>
        </li>
    </ul>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 访问ul元素下第一个li子元素。
        $("ul>li:first").append("<font color='red'> 是ul元素之内第一个li子元素</font>");

        // 访问ul元素之内，没有id属性的li子元素
        $("ul>li:not([id])").append("<font color='red'> 是ul元素之内、没有id属性li子元素</font>");

        // 访问ul元素之内，索引为偶数的li子元素，并为它们添加背景色
        $("ul>li:even").css("background-color", "#ccffcc");

        // 访问ul元素之内，索引大于4的li子元素(元素索引从0开始)
        $("ul>li:gt(4)").append("<br/><font color='red'> 是ul元素之内、索引大于4的li子元素</font>")
            .css("border", "1px dashed black");

        // 访问ul元素之内，且包含span元素的li子元素
        $("ul>li:has('span')").append(
            "<br/><font color='red'> 是ul元素之内、且包含span元素的li子元素</font>");
                // <font color="red"></font>
        // 访问li元素之内，且可见的span子元素
            $("li>span:visible").append(
                "<font color='red'> 是li元素之内，且可见的span子元素</font>")
                .css("background-color", "#bbbbbb");
    </script>
</body>
</html>

该程序同时使用了选择器和伪类选择器。

:lang伪类选择器

:lang伪类选择器是jQuery 1.9新增的,它用于根据语言代码来访问HTML元素。

下面代码示范了:lang伪类选择器的作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 使用jQuery()函数 </title>
    <style type="text/css">
        .abc {
            font-size: 12pt;
        }
    </style>
</head>

<body>
    <div lang="en">fkjava.org is a good training center!</div>
    <div lang="en-US">FKjava.org is a good training center!</div>
    <p lang="en">FKjava.org is a good training center!</p>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // // 访问所有lang属性值以en开头的元素
        $(":lang(en)").css("border", "1px dashed black");
        // // 访问lang属性值以en开头的p元素
        $("p:lang(en)").css("background-color", "grey");
    </script>
</body>

</html>

该程序中的第一行JS代码根据:lang(en)来获取元素,这样将会获取所有leng 属性为en或以en开头的元素,因此该页面中2个<div.../>和一个<p.../>元素都能匹配。
该程序中的第二行JS代码根据p:lang(en)来获取元素,这样将会获取所有leng属性为en或以en开头的p元素,因此该页面中只有一个<p.../>元素可以匹配。

子代伪类选择器

在下面的5个伪类选择器中,:first-child、:last-child和:first、:last有点相似,且:nth-child、:nth-last-child比较有用。

:nth-child伪类选择器

  • :nth-child(index/even/odd/equation):这个伪类选择器的功能比较强大,它有如下4种用法:
    • :nth-child(n):返回由匹配指定选择器且是其父节点内的第n个DOM节点包装成的jQuery对象,其中n为从1开始的元素索引。
    • :nth-child(even):返回由匹配指定选择器且在其父节点内的节点索引为偶数的HTML元素包装成的jQuery对象。
    • :nth-child(odd):返回由匹配指定选择器且在其**父节点内的节点索引为奇数**的HTML元素包装成的jQuery对象。
    • :nth-child(xn+m):返回由匹配指定选择器且在其父节点内的节点索引为xn+m的HTML元素包装成的jQuery对象,其中n不可变，x、m可变。例如3n+1,则匹配索引为1、4、7等的元素。
  • :nth-last-child(index/even/odd/equation):这个选择器与:nth-child的功能大致相似,只不过该选择器是倒过来计算索引。
  • :first-child:返回由匹配指定选择器且是其父节点的第一个HTML元素的HTML元素包装成的jQuery对象。
  • :last-child:返回由匹配指定选择器且是其父节点的最后一个HTML元素的HTML元素包装成的jQuery对象。
  • :only-child:返回由匹配指定选择器且是其父元素中唯一的HTML元素的HTML元素包装成的jQuery对象,也就是说:如果该父元素下有多个子元素则不会被匹配。

程序示例

下面的程序示范了以上伪类选择器的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 使用jQuery()函数 </title>
</head>

<body>
    <ul>
        <li id="java">疯狂Java讲义</li>
        <li id="javaee" class="test">轻量级Java EE企业应用实战</li>
        <li id="ajax">疯狂前端开发讲义</li>
        <li id="xml">疯狂XML讲义</li>
        <li id="ejb">经典Java EE企业应用实战</li>
        <li>
            <span id="android">疯狂Android讲义</span>
        </li>
    </ul>
    <span>疯狂Java联盟</span>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 访问父元素内、索引为第1、4、7...个li元素
        $("li:nth-child(3n+1)").css("border", "1px dashed black");

        // 访问父元素内、索引为倒数第1、4、7...个li元素
        $("li:nth-last-child(3n+1)").css("background-color", "grey")
            .css("padding", "10px");

        // 访问页面中span元素、且该span元素的父元素下仅包含该span元素。
        $("span:only-child()").append(" <b>是作为父元素唯一子元素的span元素</b>");

        // 测试:first和:first-child之间的关系
        alert($("ul>li:first").html() == $("ul>li:first-child").html());
    </script>
</body>
</html>

XXX-of-type伪类选择器

jQuery 1.9还新增了如下几个伪类选择器:first-of-type、:last-of-type、:nth-of-type、:nth-last-of-type、:only-of-type。它们的作用有点类似于:first-child、:last-child、:nth-child、:nth-last-child、:only-child,但又略有不同。

选择符 描述
:first-of-type 返回匹配指定选择器且是其父节点内的第一个同类型的元素。
:last-of-type 返回匹配指定选择器且是其父节点内的最后一个同类型的元素。
:nth-of-type(index/even/odd/equation) 返回匹配指定选择器且是其父节点内的第index个、偶数个、奇数个或特定公式个同类型的元素。
:nth-last-of-type(index/even/odd/equation) 与前一个伪类选择器的作用类似,只是倒过来计算索引而已。
:only-of-type 返回匹配指定选择器且是其父节点内的唯一同类型的元素。

:nth-child和:nth-of-type的异同

举个例子说明:

  • .abc:nth-child(n),先选择出匹配.abc的元素,然后判断这些元素是否是父元素的第n个孩子,如果是则选中.
  • .abc:nth-of-type(n),先选择出匹配.abc的元素,然后判断这些元素是否是父类的第n个孩子,并且这个孩子还要匹配.abc(同类型)

程序示例

请看书,懒得抄了.