jquery第一个子元素

获取第一个子元素的方法

在jQuery中，获取元素的第一个子元素可以使用多种方法。以下是几种常见的实现方式：

first()方法
使用first()方法可以快速选择匹配元素集合中的第一个元素：

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

:first选择器
通过:first伪类选择器可以直接定位第一个子元素：

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

eq(0)方法
使用索引定位的方式获取第一个子元素：

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

实际应用示例

假设HTML结构如下：

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

获取第一个<li>元素并添加样式：

$('#parentList').children().first().css('color', 'red');

性能注意事项

使用children().first()比:first选择器性能更优，因为后者需要扫描所有匹配元素。对于大型DOM结构，建议优先使用链式方法而非伪类选择器。

原生JavaScript对比

等效的原生JavaScript实现方式：

document.querySelector('parentSelector').firstElementChild;

jQuery方法提供了更好的浏览器兼容性和链式操作支持，但原生方法在简单场景下性能更高。