jquery所有父节点的第一个子节点

jQuery中获取父节点的第一个子节点可通过多种方式实现：使用parent()方法定位父节点后，结合children(':first-child')选择器或first()方法获取其首个子元素。$(selector).parent().children(':first-child')会选取父节点的所有子元素中第一个符合条件的节点，而$(selector).parent().children().first()则直接获取子元素集合的首个元素，这两种方式均常用于DOM操作中精准定位层级关系，适用于动态页面开发中需要操作父级首个子节点的场景，需注意:first-child是CSS选择器（匹配首个子元素），而first()`是jQuery方法（操作集合）。

jQuery获取所有父节点的第一个子节点：方法与实例详解

在网页开发中,操作DOM元素是jQuery的核心功能之一，常见的需求之一是"获取所有父节点的第一个子节点"——例如为每个列表项（<li>）的第一个子元素添加样式，或为每个段落（<p>）的首个文本节点设置特殊格式，jQuery提供了简洁的选择器和方法来实现这一需求，本文将详细讲解其实现方式、注意事项及实际应用场景。

核心概念：什么是"父节点的第一个子节点"？

在DOM树中,"父节点"指的是某个元素的直接上级元素，而"第一个子节点"则是父节点下的第一个子元素（注意：文本节点、注释节点等也算子节点，但通常我们关注的是元素节点）。

<div class="parent">
  <span>第一个子节点</span>  <!-- 目标元素 -->
  <p>第二个子节点</p>
  <ul>第三个子节点</ul>
</div>

在上述结构中,.parent是父节点，<span>是它的第一个子节点。

jQuery实现方法：first-child选择器

jQuery提供了first-child选择器，专门用于匹配每个父节点的第一个子元素，结合基础选择器，可以快速定位目标元素。

基本语法

$(selector + ':first-child')

selector可以是任何jQuery基础选择器（如元素名、类名、ID等），first-child会筛选出该选择器匹配的元素中，属于其父节点第一个子节点的元素。

示例1：获取所有父节点的第一个子元素

假设有以下HTML结构：

<div class="container">
  <ul>
    <li class="item">列表项1-1</li>  <!-- 目标：ul的第一个子节点 -->
    <li class="item">列表项1-2</li>
  </ul>
  <div class="box">
    <p>段落1</p>                    <!-- 目标：div的第一个子节点 -->
    <span>span1</span>
  </div>
  <table>
    <tr>
      <td>单元格1</td>               <!-- 目标：tr的第一个子节点 -->
      <td>单元格2</td>
    </tr>
  </table>
</div>

要获取所有父节点（<ul>、<div class="box">、<tr>）的第一个子节点，可以使用以下jQuery代码：

$('.container :first-child').css('color', 'red');

说明：

• first-child前的空格（.container :first-child）表示".container后代中的第一个子节点"，如果去掉空格（.container:first-child），则表示"本身是父节点第一个子节点的.container元素"。
• 上述代码会将<li class="item">、<p>、<td>的文本颜色设为红色。

示例2：特定父节点的第一个子节点

如果只想获取特定父节点的第一个子节点（所有<ul>的第一个子节点），可以缩小选择器范围：

$('ul:first-child').css('font-weight', 'bold');

结果：仅.container下<ul>的第一个子节点<li class="item">会加粗。

示例3：动态筛选（结合其他选择器）

first-child可以与其他选择器结合使用，实现更复杂的筛选，例如获取所有<li>中类名为item的第一个子节点：

<ul>
  <li>
    <span class="item">子节点1</span>  <!-- 目标：li的第一个子节点且类名为item -->
    <span>子节点2</span>
  </li>
  <li>
    <p>非item节点</p>               <!-- 不匹配 -->
    <span class="item">子节点3</span>
  </li>
</ul>

$('li .item:first-child').css('background', 'yellow');

说明：

• li .item表示<li>后代中类名为item的元素，first-child进一步筛选这些元素中属于<li>第一个子节点的部分。
• 结果：仅第一个<li>下的<span class="item">背景变黄。

注意事项：first-child与first的区别

初学者容易混淆first-child和first，两者的核心区别在于作用范围：

示例对比：

<div>
  <p>段落1</p>  <!-- 匹配 `div:first-child`，不匹配 `p:first` -->
</div>
<div>
  <p>段落2</p>
</div>

$('div:first-child').css('color', 'blue');  // 仅第一个`<p>`变蓝
$('p:first').css('color', 'green');         // 所有`<p>`中的第一个变绿

进阶应用：动态添加元素后的处理

当页面动态添加元素时,已绑定的first-child选择器不会自动生效，需要重新触发选择或使用事件委托，以下是几种常见解决方案：

方法1：重新绑定选择器

// 动态添加元素后
function addNewElement() {
  $('.container').append('<ul><li>新列表项</li><li>另一个列表项</li></ul>');
  // 重新应用样式
  $('.container :first-child').css('color', 'red');
}
// 或者封装成函数
function applyFirstChildStyles() {
  $('.container :first-child').css('color', 'red');
}
// 初始调用
applyFirstChildStyles();
// 动态添加后调用
addNewElement();
applyFirstChildStyles();

方法2：使用事件委托

对于动态元素,推荐使用事件委托：

// 使用on方法进行事件委托
$(document).on('click', '.container :first-child', function() {
  $(this).css('color', 'blue');
});

方法3：结合MutationObserver监听DOM变化

对于复杂的动态场景,可以使用MutationObserver：

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes.length) {
      applyFirstChildStyles();
    }
  });
});
// 配置观察选项
const config = { childList: true, subtree: true };
// 开始观察
observer.observe(document.querySelector('.container'), config);

实际应用场景

场景1：导航菜单高亮

<nav>
  <ul class="menu">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

// 为每个菜单项的第一个子元素添加悬停效果
$('.menu li:first-child').hover(
  function() {
    $(this).find('a').css('background-color', '#f0f0f0');
  },
  function() {
    $(this).find('a').css('background-color', '');
  }
);

场景2：表格样式优化

<table class="data-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三

标签： #父级首 #子jq首子