jQuery API 3.3.1——子元素

:first-child
概述：
匹配所给选择器( :之前的选择器)的第一个子元素
类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
           $("ul li:first-child").css("background-color","pink");
        })
    </script>
</head>
<body>
<ul>
    <li>111
        <ul>
            <li>333</li>
            <li>444</li>
        </ul>
        <span>555</span>
    </li>
    <li>222</li>
    <ul>
        <li>John</li>
        <li>Karl</li>
        <li>Brandon</li>
    </ul>
    <ul>
        <li>Glen</li>
        <li>Tane</li>
        <li>Ralph</li>
    </ul>
</ul>

</body>
</html>

在这里插入图片描述

:first-of-type
概述：
结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。（解释太模糊直接看代码）

查找作为父元素的span类型子元素中的"长子"的span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("span:first-of-type").css("background-color","pink");
        })
    </script>
</head>
<body>
<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
    <span>777</span>
    <span>
        <p>111</p>
        <span>888</span>
    </span>
</div>

</body>
</html>

在这里插入图片描述
结果:
n4虽然不是n2的第一个子元素，但它是n2所有span类型子元素中的第一个，因此可以匹配
[span1,span1]

第二个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $(".abc:first-of-type").css("background-color","pink");
        })
    </script>
</head>
<body>
<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">
            <p>111</p>
            <h3>222</h3>
            3333
        </span>
        <span id="n9">span2</span>
    </div>
</div>

</body>
</html>

在这里插入图片描述
first-of-type这个现在还不是很懂（苦笑）

:last-child
概述
匹配最后一个子元素
:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("ul li:last-child").css("background-color","pink");
        })
    </script>
</head>
<body>
<ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
</ul>
<ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>222
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </li>
</ul>

</body>
</html>

在这里插入图片描述

:last-of-type
概述
结构化伪类，匹配E的父元素的最后一个E类型的孩子
大体的意思跟 :first-of-type差不多，只是一个是第一个元素，一个是最后一个元素，这里就不赘述了。
:nth-child
概述
匹配其父元素下的第N个子或奇偶元素
:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。
:nth-child从1开始的，而:eq()是从0算起的！
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("ul li:nth-child(2)").css("background-color","pink");
        })
    </script>
</head>
<body>
<ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
</ul>
<ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
</ul>
<ul>
    <p>Glen</p>
    <li>Tane</li>
    <li>Ralph</li>
</ul>
<ul>
    <li>Tane</li>
    <p>Glen</p>
    <li>Ralph</li>
</ul>
</body>
</html>

在这里插入图片描述

:nth-last-child(n|even|odd|formula)
概述
选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一ul包含两个 “li”， $('li:nth-child(1)')选择第一个li，而$ (‘li:eq(1)’)选择第二个。
这个不寻常的用法，可进一步讨论中找到W3C CSS specification.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("ul li:nth-last-child(2)").css("background-color","pink");
        })
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

在这里插入图片描述

:nth-last-of-type(n|even|odd|formula)
概述
选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一ul包含3个li，$(‘li:nth-last-of-type(1)’)选择第3个，也就是最后一个li。
这个不寻常的用法，可进一步讨论中找到 W3C CSS specification

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("ul li:nth-last-of-type(2)").css("background-color","pink");
        })
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

在这里插入图片描述

:nth-of-type(n|even|odd|formula)

概述
选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。
这个不寻常的用法，可进一步讨论中找到W3C CSS specification.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("span:nth-of-type(2)").css("background-color","pink");
        })
    </script>
</head>
<body>
<div>
    <span>John</span>
    <b>Kim</b>
    <span>Adam</span>
    <b>Rafael</b>
    <span>Oleg</span>
</div>
<div>
    <b>Dave</b>
    <span>Ann</span>
</div>
<div>
    <i><span>Maurice</span></i>
    <span>Richard</span>
    <span>Ralph</span>
    <span>Jason</span>
</div>
</body>
</html>

在这里插入图片描述

:only-child
概述
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：

<p><img/>图片</p>，
用$('p img:only-child')是可以匹配，感谢：nwujiajie 指正）

在 ul 中查找是唯一子元素的 li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(()=>{
            $("ul li:only-child").css("background-color","pink");
        })
    </script>
</head>
<body>
<ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
</ul>
<ul>
    <li>Glen</li>
</ul>
</body>
</html>

在这里插入图片描述

:only-of-type
概述
选择所有没有兄弟元素，且具有相同的元素名称的元素。
如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

jQuery API 3.3.1——子元素

猜你喜欢