jQuery中，:first-child选择器用于匹配父元素的第一个子元素，语法为$("父元素:first-child")，它会选取每个指定父元素下的首个子元素，无论子元素类型（如div、p等），但需注意仅匹配元素节点，不匹配文本节点。$("ul li:first-child")会选择每个下的第一个，与:first（选取所有匹配元素的第一个）不同，:first-child`基于父元素的子元素位置进行匹配，常用于导航栏首项、列表首项等场景，简洁高效地定位目标元素，是DOM操作中常用的选择器之一。
jQuery选择器轻松获取第一个子元素：方法与实例详解
在jQuery开发中，元素选择器是操作DOM的核心工具，当我们需要对某个父元素的第一个子元素进行样式调整、事件绑定或数据操作时，如何精准、高效地选取目标元素？本文将详细介绍jQuery中获取第一个子元素的常用选择器，包括语法、使用场景及注意事项,帮助开发者快速掌握这一实用技能。
为什么需要获取第一个子元素？
在实际开发中，获取父元素的第一个子元素是非常常见的需求,以下是一些典型应用场景：
- 导航栏设计：需要为第一个菜单项添加高亮样式或特殊标识
- 列表展示：列表中的第一个条目需要特殊标记（如"新品"、"推荐"、"热门"等）
- 表格处理：表格的第一行需要作为表头进行特殊处理或样式区分
- 轮播组件：动态生成的轮播图中，第一张图片默认显示
- 表单验证：表单中的第一个输入框默认获得焦点
- 响应式布局：在不同屏幕尺寸下对第一个子元素进行特殊布局处理
jQuery提供了多种选择器和方法来满足这些需求,接下来我们逐一解析。
核心选择器：first-child与first-of-type
jQuery中最常用于获取第一个子元素的选择器是first-child和first-of-type，两者看似相似，实则存在关键区别,开发者需要根据实际需求选择合适的方法。
first-child 选择器：匹配父元素的第一个子元素
语法：
$("父元素选择器 > :first-child")
或直接在父元素内使用：
$("父元素选择器").find(":first-child")
作用：选取指定父元素的所有子元素中的第一个，无论该子元素的类型是什么，此选择器不考虑子元素的标签类型,仅根据其在父元素中的位置进行匹配。
示例： 假设有以下HTML结构：
<div class="container"> <p>这是第一个子元素（p标签）</p> <span>这是第二个子元素（span标签）</span> <div>这是第三个子元素（div标签）</div> </div>
使用first-child选取第一个子元素：
$(".container > :first-child").css("color", "red"); // 将第一个p标签文字变红
结果：只有第一个<p>元素会被选中,即使它的类型与其他子元素不同。
first-of-type 选择器：匹配父元素的第一个特定类型子元素
语法：
$("父元素选择器 > 特定类型:first-of-type")
或：
$("父元素选择器").find("特定类型:first-of-type")
作用：选取指定父元素的第一个特定类型的子元素，即仅考虑与选择器类型匹配的子元素，此选择器会先过滤出指定类型的子元素,然后从中选择第一个。
示例： 修改HTML结构,使第一个子元素与后续子元素类型不同：
<div class="container"> <span>这是第一个子元素（span标签）</span> <p>这是第二个子元素（p标签）</p> <p>这是第三个子元素（p标签）</p> </div>
-
使用
first-child选取第一个子元素：$(".container > :first-child").css("color", "blue"); // 选中span -
使用
first-of-type选取第一个p标签：$(".container > p:first-of-type").css("color", "green"); // 选中第二个p（第一个p类型）
结果：first-child选中<span>，而first-of-type选中第一个<p>元素（即使它是第二个子元素）。
结合children()方法：获取直接子元素中的第一个
除了伪类选择器，jQuery还提供了children()方法，用于获取指定元素的所有直接子元素，再结合first选择器可进一步筛选第一个子元素，这种方法在需要明确表达"仅获取直接子元素"语义时特别有用。
语法：
$("父元素选择器").children(":first")
作用：与first-child类似，但children()仅获取直接子元素（不会遍历后代元素），first则从子元素中选取第一个，这种方法比使用>选择器更明确地表达了"直接子元素"的语义。
示例：
<ul class="menu"> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> </ul>
使用children()方法：
$(".menu").children(":first").addClass("active"); // 为第一个li添加active类
结果：与$(".menu > li:first-child")效果相同，但children()更明确表达了"直接子元素"的语义。
进阶用法：
// 获取特定类型的第一个直接子元素
$(".container").children("p:first").css("background", "yellow");
// 链式操作：获取第一个子元素并添加多个样式
$(".list").children(":first")
.addClass("highlight")
.css({"font-weight": "bold", "border": "2px solid #ff0000"});
其他实用方法
使用eq()方法
eq()方法可以通过索引获取指定位置的元素,从0开始计数：
// 获取父元素的第一个子元素（索引为0）
$(".parent").children().eq(0).addClass("first-item");
// 获取特定类型的第一个子元素
$(".container").find("div").eq(0).css("color", "red");
使用first选择器
first选择器是jQuery特有的选择器,用于选择匹配元素中的第一个：
// 选择所有div中的第一个
$("div:first").css("background", "lightblue");
// 结合其他选择器使用
$(".container div:first").addClass("special");
注意事项与常见问题
first-child与first-of-type的核心区别
first-child：不考虑子元素类型，仅按位置选取第一个子元素first-of-type：按子元素类型选取，即"同类型子元素中的第一个"
场景对比：
<div class="box"> <div>子元素1（div）</div> <p>子元素2（p）</p> <div>子元素3（div）</div> </div>
$(".box > :first-child")：选中第一个<div>（子元素1）$(".box > p:first-of-type")：选中第一个<p>（子元素2）$(".box > div:first-of-type")：选中第一个<div>（子元素1，与first-child结果相同）
空白文本节点的影响
在HTML中，元素间的空白（如换行、空格）会被解析为文本节点，这可能会影响first-child的选择结果：
<div class="test"> <!-- 这里的换行会被视为文本节点 --> <p>第一个实际元素</p> <p>第二个元素</p> </div>
在这种情况下，$(".test > :first-child")可能会选中空白文本节点而不是<p>元素,解决方案：
// 使用:first-of-type避免空白节点影响
$(".test > p:first-of-type").css("color", "red");
// 或者使用filter方法过滤文本节点
$(".test > *").filter(function() {
return this.nodeType === 1; // 只选择元素节点
}).first().css("color", "red");
浏览器兼容性
first-child和first-of-type是CSS3标准选择器，jQuery已对其进行了兼容性处理，**所有现代浏览器
