异常教程
jQuery :first 选择器（保姆级教程）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
一、前言：选择器的魔法世界
在网页开发中，选择器就像一把精准的钥匙，能够快速定位到页面中的 HTML 元素。jQuery 作为简化 JavaScript 操作的利器，提供了大量便捷的选择器，其中 :first 选择器就是一个轻量但功能强大的工具。无论是初学者还是中级开发者，掌握 :first 选择器的使用逻辑和场景，都能显著提升代码的效率和可读性。本文将从基础概念、语法解析、实际案例到进阶技巧，系统性地讲解这一选择器的使用方法，并通过生动的比喻帮助读者建立直观理解。
二、什么是 jQuery :first 选择器？
1. 基本定义与核心功能
jQuery :first 是一个伪类选择器，用于匹配被选元素集合中的第一个元素。它的作用可以形象地理解为“在一群元素中，只选第一个‘排头兵’”。
例如，在页面中有多个 <div> 元素时，:first 会选择第一个 <div>，而忽略其他同类型元素。这种特性在需要操作列表或表单的首项时特别实用。
2. 与原生 JavaScript 的对比
与原生 JavaScript 的 document.querySelector 不同，jQuery :first 的语法更简洁，且天然支持链式调用。例如：
// 原生 JavaScript 需要两步操作
const firstDiv = document.querySelectorAll('div')[0];
firstDiv.style.color = 'red';
// jQuery 一行代码完成
$('div:first').css('color', 'red');
三、语法与使用场景
1. 基础语法格式
jQuery :first 的语法格式为：
$( "selector:first" )
其中 selector 是任意有效的 CSS 或 jQuery 选择器。
示例 1：选择所有 <p> 标签中的第一个
$("p:first").css("background-color", "yellow");
2. 核心使用场景
场景 1：表单验证中的首项处理
在表单提交时，开发者常需要高亮显示第一个未填写的输入框。例如：
// 当表单提交时，检查第一个未填写的输入框
$("form").submit(function() {
const firstEmpty = $("input[type='text']:empty:first");
if (firstEmpty.length > 0) {
firstEmpty.css("border", "2px solid red");
return false; // 阻止表单提交
}
});
场景 2：动态内容加载时的首项操作
在 AJAX 请求后，若需要对返回数据的首项进行特殊处理（如高亮显示），可以结合 :first：
$.ajax({
url: "data.json",
success: function(data) {
const firstItem = $(data).find("item:first");
console.log("First item content:", firstItem.text());
}
});
四、进阶技巧与常见问题
1. 与 :first-child 的区别
许多开发者容易混淆 :first 和 :first-child：
:first：选择所有匹配元素中的第一个元素（全局首个）。:first-child：选择每个父元素下第一个子元素（局部首个）。
示例对比：
<div class="container">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<div class="container">
<p>Third paragraph</p>
</div>
// 选择所有 p 元素中的第一个（全局首个）
$("p:first").css("color", "blue"); // 选中 "First paragraph"
// 选择每个 container 中的第一个 p（局部首个）
$(".container p:first-child").css("color", "green");
// 选中 "First paragraph" 和 "Third paragraph"
2. 性能优化建议
- 避免过度嵌套选择器：如
$("div ul li:first")可能不如$("div").find("ul").find("li:first")易读且高效。 - 优先使用原生方法：若仅需获取单个元素，可考虑
document.querySelector("selector")，但需权衡代码可维护性。
五、实战案例：构建动态轮播图
1. 需求分析
设计一个简单的轮播图，要求：
- 默认显示第一张图片；
- 点击按钮时，切换到下一张，最后一张循环回第一张。
2. HTML 结构
<div class="carousel">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<button id="next">Next</button>
3. jQuery 实现代码
$(document).ready(function() {
// 初始化：确保首张图片被激活
$(".carousel img:first").addClass("active");
$("#next").click(function() {
// 获取当前激活的图片
const current = $(".carousel img.active");
// 获取下一个元素，若当前为最后一个则回到第一个
const next = current.next().length ? current.next() : $(".carousel img:first");
current.removeClass("active");
next.addClass("active");
});
});
4. 代码解析
- 初始化阶段：通过
:first确保首张图片默认显示。 - 循环逻辑：使用
next()和:first组合实现无缝切换，避免索引越界问题。
六、常见问题与解决方案
1. 问题：:first 未生效？
可能原因：
- 选择器语法错误（如缺少空格或拼写错误）。
- 元素尚未加载完成（需在
$(document).ready()中执行）。
解决方案：
// 确保在 DOM 加载完成后执行
$(document).ready(function() {
$("div:first").show();
});
2. 问题：如何选择父元素中的首个子元素？
答案：使用 :first-child，而非 :first。
// 选择每个 div 的首个子级 span
$("div span:first-child");
七、总结与展望
1. 关键点回顾
:first是 jQuery 提供的轻量级选择器，专为快速定位元素集合中的第一个成员。- 结合其他选择器（如
:nth-child、:not）可实现复杂逻辑。 - 在性能敏感场景中，需权衡简洁性与效率。
2. 进阶学习方向
- 探索
:first-of-type、:last等类似选择器。 - 深入理解 jQuery 选择器的优先级规则。
通过本文的讲解，读者应能熟练运用 jQuery :first 选择器完成基础操作，并在实际项目中灵活组合其他工具，提升开发效率。记住，选择器的巧妙运用，往往能化繁为简，让代码更优雅、更易维护。
希望这篇指南能帮助你在前端开发的道路上迈出坚实的一步！