jQuery中，选择第一个子元素可通过:first-child选择器实现，其语法为$("父元素:first-child")或直接$("子元素:first-child")，该选择器匹配每个父元素的第一个子元素，与:first（全局首个元素）不同，:first-child针对每个父元素的子集生效，$("ul li:first-child")会选取每个`下的首个`元素，常用于为首个列表项添加特殊样式、获取表格首行等场景，灵活应用于页面结构化元素的精准定位与样式控制。
jQuery选择器轻松获取第一个子元素：实用指南与示例
在jQuery中,选择器是操作DOM的核心工具，而精准定位特定位置的子元素是前端开发中的常见需求，本文将深入探讨如何使用jQuery选择器高效获取第一个子元素，涵盖核心选择器的语法、关键区别及实际应用场景，助您提升DOM操作效率。
jQuery中获取第一个子元素的常用选择器
jQuery提供了多个选择器用于精准选取第一个子元素,其中first-child和first-of-type最为常用，尽管名称相似，但它们的匹配规则存在本质差异，需根据具体场景选择合适的选择器。
first-child 选择器：匹配父元素的第一个子元素
first-child选择器用于选取某个父元素下的第一个子元素，不限制子元素的类型（无论是<p>、<div>、<span>或其他标签），只要该元素是其父元素的第一个子节点（包括文本节点），即会被匹配。
语法
$("父元素选择器:first-child")
示例说明
假设有以下HTML结构：
<div id="container">
<p>这是第一个子元素（p标签）</p> <!-- 匹配:first-child -->
<div>这是第二个子元素（div标签）</div>
<span>这是第三个子元素（span标签）</span>
</div>
<div id="empty"></div> <!-- 无子元素，不匹配 -->
使用jQuery选取#container的第一个子元素：
$("#container :first-child").css("color", "red"); // 将第一个p标签文字设为红色
结果：只有第一个<p>元素文字变红，<div>和<span>不受影响。
⚠️ 注意事项
- 如果父元素第一个子节点是文本节点（如空格、换行），
first-child也会匹配该文本节点，实际开发中需注意HTML结构的规范性。 - 选择器与父元素选择器间需加空格（如
#container :first-child），表示在#container的后代中查找，否则会查找ID为container:first-child的元素。
first-of-type 选择器：匹配父元素的第一个特定类型子元素
first-of-type选择器用于选取某个父元素下的第一个特定类型的子元素，与first-child不同，它先筛选子元素的标签类型（如p、div），再取该类型中的第一个元素。
语法
$("父元素选择器:first-of-type")
示例说明
假设HTML结构如下：
<div id="mixed">
<div>这是第一个子元素（div标签）</div> <!-- 匹配:first-of-type（div类型第一个） -->
<p>这是第二个子元素（p标签）</p> <!-- 匹配:first-of-type（p类型第一个） -->
<div>这是第三个子元素（div标签）</div>
<span>这是第四个子元素（span标签）</span> <!-- 匹配:first-of-type（span类型第一个） -->
</div>
-
选取
#mixed的第一个div子元素：$("#mixed div:first-of-type").css("background", "yellow"); // 第一个div背景变黄结果：第一个
<div>背景变黄，第三个<div>不受影响。 -
选取
#mixed的第一个p子元素：$("#mixed p:first-of-type").css("font-weight", "bold"); // p标签文字加粗结果：唯一的
<p>文字加粗。
⚠️ 注意事项
first-of-type在IE9及以下版本不被支持，需结合jQuery的兼容性方案或使用其他替代方法。- 若父元素无指定类型的子元素（如
#mixed ul:first-of-type），则不会匹配任何元素。
first 选择器：匹配选择器集合中的第一个元素
jQuery还提供了first选择器，但它不限定父元素，而是匹配整个文档中当前选择器集合的第一个元素（功能等同于$(selector).first()），常用于从已选元素中提取首个元素。
语法
$("元素选择器:first")
示例说明
假设HTML结构如下：
<div class="box">第一个div</div> <p>第一个p</p> <div class="box">第二个div</div>
