在操作 DOM 时，经常会选中一组元素，但实际只想对其中第一个下手。jQuery 的 first() 方法就是专门用来从匹配的元素中提取第一个元素的。它的名字很直白，功能也符合直觉。相对应的，如果想取之后一个元素，用 last() 方法就行。
简洁语法
$(selector).first()
这个方法不需要任何参数，但前面的 selector 是必填的，你得先告诉 jQuery 要从哪一组元素里找第一个。它返回的是一个只包含第一个匹配元素的 jQuery 对象，所以可以直接在后面链式调用其他 jQuery 方法。
示例一：从段落中精准抓取第一个
下面这个例子很直观。页面里混杂着多个元素，有 div、几个段落和一个 h3 标题。我们用 $("p") 选中所有段落，然后通过 first() 把其中的第一个段落单独拎出来，给它加上背景色。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").first().css("background-color", "lightblue");
});
});
</script>
</head>
<body id = "main">
<h2> 代码号学习编程：first() 方法基础运用 </h2>
<div style = "border: 1px solid blue;">
div 元素
</div>
<p style = "border: 1px solid blue;">
这是第一个段落
</p>
<p style = "border: 1px solid blue;">
第二个段落元素
</p>
<h3 style = "border: 1px solid blue;">
h3 标题
</h3>
<p style = "border: 1px solid blue;">
又一个段落元素
</p>
<p> 点击下方按钮，高亮第一个段落元素。 </p>
<button> 点击高亮 </button>
</body>
</html>
注意这里 $("p") 选中了三个段落，但 first() 把范围缩小到了文档中出现的第一个段落，也就是紧接着 div 下面那个。另外两个段落不受影响。这种"选一批、取一个"的模式在列表操作中很常用，比如要给新闻列表的第一条加个置顶样式。
示例二：在嵌套选择中精确定位
first() 可以和组合选择器配合使用，实现更精细的定位。下面这个例子，页面上有四个 div，每个 div 里面各包着一个 span。我们用 $("div span") 能选中所有四个 span，但加上 first() 后就只取第一个 span，也就是"span1"，给它加上背景高亮。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div span").first().css("background-color", "lightblue");
});
});
</script>
<style>
div {
border: 1px solid blue;
}
</style>
</head>
<body id = "main">
<h2> 代码号学习编程：组合选择器配合 first() </h2>
<div>
<span> 代码号学员-A </span>
</div>
</br>
<div>
<span> 代码号学员-B </span>
</div>
</br>
<div>
<span> 代码号学员-C </span>
</div>
</br>
<div>
<span> 代码号学员-D </span>
</div>
<p> 点击下方按钮，高亮第一个 span 元素。 </p>
<button> 点击高亮 </button>
</body>
</html>
这里要特别注意，$("div span") 选中的是四个 span，不管它们分属不同的父容器，在 jQuery 的里它们是按 DOM 顺序排列的，first() 返回的就是整个文档中第一个出现的 span，而不是"每个 div 里的第一个 span"。如果你想要每个 div 的第一个 span，那得配合 .each() 或者 :first-child 选择器来做。
本节课程知识要点
first() 和 :first 选择器虽然效果类似，但机制不同。first() 是遍历方法，用在 jQuery 链式调用中更流畅；:first 是选择器，直接写在 $() 里面。我个人习惯在链式操作里优先用 first()，可读性好，而且不易和 CSS 伪类搞混。first() 返回的仍然是 jQuery 对象，哪怕原为空也不会报错，只是返回一个空。这种安全的特性让它在不确定元素是否存在时也能放心调用。
