jQuery|容易混淆的first、first-child、first-of-type

最新推荐文章于 2023-02-27 14:45:21 发布

weixin_34007879

最新推荐文章于 2023-02-27 14:45:21 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/510385

版权

first与first-child 在使用过程中容易混淆。这次我们就把他理清楚。其实这是两个概念。
first：指集合中的第一个。举例：7层楼住户的第一户。
first-child：选择器选取属于其父元素的第一个子元素。2单元下每一层的第一户。
first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。

选取第一个 元素：

$("p:first")

定义和用法

:first 选择器选取第一个元素。

注意：这个选择器只用于选取单个元素。使用

选择器选取多个元素（每个父元素一个）。

最常见的用法：与其他选择器一起使用，选取指定组合中的第一个元素（就像上面的实例）。

语法

$(":first")

样例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:first").css("background-color","yellow");
});
</script>
</head>
<body>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是最后一个段落。</p>

</body>
</html>

image.png

first-child 选择器

选取属于 的父元素中第一个为 的元素：

$("p:first-child")

定义和用法

:first-child 选择器选取属于其父元素的第一个子元素。
注意：返回的是一个集合元素

语法

$(":first-child")

<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:first-child").css("background-color","yellow");
});
</script>
</head>
<body>

<p>The first paragraph in body.</p>

<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">
<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>

<p>The last paragraph in body.</p>

</body>
</html>

image.png

说明：
第一个黄底色是指父body 标签下的第一个是p元素的元素。
第二个黄底色是指父div 标签下的第一个是p元素。

first-of-type选择器（强调位置是第一个）

选取属于其父元素的第一个 元素的每个 元素：

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

定义和用法

:first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。

语法

$(":first-of-type")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:first-of-type").css("background-color","yellow");
});
</script>
</head>
<body>

<p>body 中第一个段落。</p>

<div style="border:1px solid;">
    <p>div 中第一个段落。</p>
    <p>div 中的最后一个段落。</p>
</div><br>

<div style="border:1px solid;">
    <span>这是一个 span 元素。</span>
    <p>另一个 div 中第一个段落。</p>
    <p>另一个 div 中的最后一个段落。</p>
</div>

<p>body 中最后一个段落。</p>

</body>
</html>

image.png

注意最后一个黄色p元素，它是div中的第一个p元素，但是它的位置不是第一个。

weixin_34007879

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery|容易混淆的first、first-child、first-of-type

first与first-child 在使用过程中容易混淆。这次我们就把他理清楚。其实这是两个概念。first：指集合中的第一个。举例：7层楼住户的第一户。first-child：选择器选取属于其父元素的第一个子元素。2单元下每一层的第一户。first-of-type 选择器选取属于其父元素的特定类型的第...
复制链接

扫一扫