jquery第一个子节点

jQuery获取第一个子节点的方法

在jQuery中，获取元素的第一个子节点有多种方法，以下是几种常见的实现方式：

first()方法
使用first()方法可以直接选取匹配元素集合中的第一个元素：

$('#parentElement').children().first();

:first选择器
使用:first伪类选择器可以快速定位第一个子元素：

$('#parentElement').children(':first');

eq(0)方法
通过索引位置获取第一个子元素（索引从0开始）：

$('#parentElement').children().eq(0);

childNodes原生属性结合jQuery
如果需要包含文本节点等所有类型的子节点，可以先通过原生DOM属性获取：

$($('#parentElement')[0].childNodes[0]);

注意事项

• 上述方法默认只匹配元素节点（不包括文本节点、注释节点等）。
• children()方法仅返回直接子元素，不包括更深层级的后代元素。
• 如需包含所有类型的节点，需使用原生DOM操作后再用jQuery包装。

示例代码

<div id="container">
    <p>第一个段落</p>
    <p>第二个段落</p>
</div>

<script>
    // 获取第一个<p>元素
    var firstChild = $('#container').children().first();
    console.log(firstChild.text()); // 输出"第一个段落"
</script>