异常教程

jQuery :first-child 选择器（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，DOM 元素的层级关系如同家庭树般复杂。有时我们需要精准定位某个元素的“长子”（即第一个子元素），例如为列表的首个项目添加特殊样式，或动态操作表格的第一行数据。此时，jQuery :first-child 选择器便能发挥关键作用。它如同一把精准的手术刀，帮助开发者快速锁定目标元素，减少代码冗余。本文将从基础到进阶，结合实际案例，深入讲解这一选择器的使用逻辑与应用场景。

一、选择器基础概念：什么是:first-child？

1.1 选择器的定位逻辑

:first-child 是 jQuery 提供的 CSS 伪类选择器之一，其功能是匹配属于其父元素的第一个子元素。这里的“子元素”指的是直接子节点，而非后代元素。例如：

<div class="container">  
  <p>这是第一个子元素</p>  
  <div>这是第二个子元素</div>  
  <span>这是第三个子元素</span>  
</div>

在上述代码中，<p>标签是 .container 的第一个子元素，因此使用 $('.container > :first-child') 可以精准选中它。

1.2 与:first选择器的区别

jQuery 中还有另一个选择器 :first，它与 :first-child 容易混淆。两者的区别在于：

  • :first：匹配页面中所有元素的第一个元素（如 $('div:first') 会选中页面中第一个 <div> 元素）。
  • :first-child：仅匹配父元素的第一个子元素（如 $('div > :first-child') 选中每个 <div> 的第一个子元素）。

比喻说明：

  • :first 好比在超市中“第一个进店的顾客”，无论该顾客在哪个货架前。
  • :first-child 则是“每个货架前第一个挑选商品的顾客”。

二、选择器使用场景与代码示例

2.1 基础用法：直接定位第一个子元素

假设我们希望为列表的首个项目添加高亮样式，代码如下：

<ul class="task-list">  
  <li>任务一</li>  
  <li>任务二</li>  
  <li>任务三</li>  
</ul>  

<script>  
  $('.task-list > :first-child').css('background-color', '#f0f0f0');  
</script>

此代码会将 .task-list 列表的第一个 <li> 元素的背景色设为浅灰色。

2.2 结合其他选择器：精准筛选目标

若父容器中包含多种标签，可结合其他选择器限定条件。例如，仅选中第一个 <div> 子元素：

<div class="parent">  
  <p>非目标</p>  
  <div>目标元素</div>  
  <div>非目标</div>  
</div>  

<script>  
  $('.parent > div:first-child').text('已更新');  
</script>

这里通过 div:first-child，确保只有第一个 <div> 被选中并修改文本。

2.3 动态操作：响应式页面中的灵活应用

在动态加载内容时，:first-child 可配合事件绑定。例如，点击按钮后隐藏第一个子元素：

<button id="hide-btn">隐藏第一个项目</button>  
<div class="items">  
  <span>项目1</span>  
  <span>项目2</span>  
  <span>项目3</span>  
</div>  

<script>  
  $('#hide-btn').click(function() {  
    $('.items > :first-child').hide();  
  });  
</script>

每次点击按钮，.items 的首个子元素将被隐藏，适用于需要动态操作列表的场景。

三、进阶技巧：扩展选择器的灵活性

3.1 结合过滤方法优化性能

当父元素包含大量子元素时，直接使用 :first-child 可能效率较低。此时可结合 .first() 方法：

// 方式一：使用伪类选择器  
$('.parent > :first-child').doSomething();  

// 方式二：使用.first()方法  
$('.parent > *').first().doSomething();

.first() 方法在某些场景下性能更优，尤其当父元素子元素较多时。

3.2 处理动态插入的元素

若通过 JavaScript 动态添加子元素后需要重新定位第一个子元素，需重新触发选择器：

// 动态插入元素  
$('.parent').prepend('<p>新元素</p>');  

// 重新选中第一个子元素  
$('.parent').children().first().addClass('highlight');

此时，.children().first() 确保即使元素结构变化，仍能正确定位新生成的第一个子元素。

3.3 结合其他伪类选择器

可将 :first-child 与其他伪类组合使用，例如选中第一个子元素且为偶数索引的元素（虽然矛盾，但可用于特定逻辑）：

// 假设父元素有多个子元素  
$('.parent > :first-child:even').css('color', 'red');

此代码会为第一个子元素添加红色文字，前提是该元素的索引为偶数（0 开始计数）。

四、常见问题与解决方案

4.1 为什么选择器未生效？

可能原因及解决方法：

  1. 元素未正确加载：确保选择器在 DOM 完全加载后执行，使用 $(document).ready()。 
    $(document).ready(function() {  
  $('.container > :first-child').show();  
});
  2. 父元素选择错误：检查父元素的选择器是否正确，例如 .parent 是否存在。
  3. CSS 样式覆盖：使用浏览器开发者工具检查样式是否被其他规则覆盖。

4.2 如何处理多个父元素的情况？

若页面中有多个父元素需要操作，:first-child 会为每个父元素匹配其第一个子元素。例如：

<div class="box">  
  <p>Box1 第一个子元素</p>  
</div>  
<div class="box">  
  <img>  
  <p>Box2 第一个子元素是图片</p>  
</div>  

<script>  
  $('.box > :first-child').css('border', '2px solid red');  
</script>

此代码会为每个 .box 的第一个子元素添加红色边框，无论子元素类型如何。

五、实际案例：构建可折叠导航菜单

5.1 需求分析

假设需要创建一个导航菜单，要求：

  1. 默认展开第一个子菜单项；
  2. 点击其他菜单项时，仅第一个子项保持展开。

5.2 HTML 结构

<nav>  
  <div class="menu-item">  
    <h3>菜单1</h3>  
    <ul>  
      <li>子项1-1</li>  
      <li>子项1-2</li>  
    </ul>  
  </div>  
  <!-- 其他菜单项类似 -->  
</nav>

5.3 jQuery 实现

// 默认展开第一个菜单的子项  
$('nav > .menu-item:first-child ul').show();  

// 绑定点击事件，保持第一个子项展开  
$('nav > .menu-item').click(function() {  
  // 隐藏所有子项，除第一个外  
  $(this).siblings().find('ul').hide();  
  // 展开当前点击项的子项，但允许第一个始终展开  
  if (!$(this).is(':first-child')) {  
    $(this).find('ul').slideToggle();  
  }  
});

此案例中，:first-child 用于初始化和逻辑判断，确保用户体验的连贯性。

结论

jQuery :first-child 选择器是开发者工具箱中的高效工具，尤其在需要快速定位父元素首个子元素时。通过结合其他选择器、方法及事件处理，它能灵活应对列表操作、动态内容管理等场景。

对于初学者，建议从基础语法开始，逐步通过案例理解其与 :first 的区别；中级开发者则可探索其在复杂 DOM 结构中的高级应用。掌握这一选择器，不仅能提升代码简洁性，更能优化页面交互逻辑，为用户提供更流畅的体验。

在未来的开发中，随着项目复杂度的提升，合理使用 :first-child 将成为处理层级关系问题的得力助手。

最新发布

查看更多文章