jquery获取第一个子元素

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

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

通过 :first-child 选择器

$('parentSelector > :first-child')

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

通过 first() 方法

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

先获取所有子元素，再用 first() 方法筛选第一个。

通过 eq(0) 方法

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

与 first() 类似，但通过索引获取第一个子元素。

通过 :first 选择器

$('parentSelector > *:first')

使用 :first 伪类选择器匹配第一个元素。

实际应用示例

假设有以下 HTML 结构：

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

获取第一个 <li> 的 jQuery 代码：

var firstItem = $('#list > li:first-child');
// 或
var firstItem = $('#list').children().first();

注意事项

• 确保父元素存在且包含子元素，否则可能返回空 jQuery 对象。
• 这些方法返回的是 jQuery 对象，如需 DOM 元素可追加 [0] 或调用 get(0)。
• 对于复杂的 DOM 结构，建议明确指定子元素类型（如 li:first-child 而非 *:first-child）。