jQuery中first-child与first选择器区别

72 阅读 0 评论 48 点赞

我是靠谱客的博主魁梧故事，最近开发中收集的这篇文章主要介绍jQuery中first-child与first选择器区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、first-child

first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素：

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>jQuery中first-child与first选择器区别</title>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//选择了2个元素：
//分别是：<li>John</li> 和 <li>Glen</li>
//first-child为每个父级元素匹配第一个子元素，可以匹配出多个元素

$("li:first-child").css('color', 'red');
</script>
</body>
</html>

效果：

2、first

first-child为获取匹配的第一个元素，只能匹配一个元素。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>jQuery中first-child与first选择器区别</title>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
//选择了1个元素：
//是：<li>John</li>
//first-child为获取匹配的第一个元素，只能匹配一个元素

$("li:first").css('color', 'red');
</script>
</body>
</html>