jquery获取第一个子元素

jQuery获取第一个子元素的方法

使用jQuery可以通过多种方式获取元素的第一个子元素，以下是几种常见的方法：

使用:first-child选择器

$('parentSelector > :first-child')

这种方法直接选择父元素下的第一个子元素。

使用first()方法

$('parentSelector').children().first()

通过children()获取所有子元素，再用first()筛选第一个。

使用eq()方法

$('parentSelector').children().eq(0)

eq(0)选择子元素集合中的第一个元素（索引从0开始）。

使用:first选择器

$('parentSelector').children(':first')

与first()类似，但通过选择器实现。

示例代码

假设HTML结构如下：

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

获取第一个<li>元素

// 方法1
$('#list > :first-child').css('color', 'red');

// 方法2
$('#list').children().first().css('color', 'blue');

// 方法3
$('#list').children().eq(0).css('color', 'green');

注意事项

• 如果父元素没有子元素，上述方法会返回空的jQuery对象。
• :first-child是CSS选择器，可能与其他jQuery筛选器性能表现不同。
• children()仅查找直接子元素，不包括更深层级的后代元素。

性能比较

对于简单需求，:first-child选择器通常性能最优。若需进一步操作子元素集合，first()或eq(0)更灵活。