jquery获取第一个元素

获取第一个元素的方法

在jQuery中，有多种方法可以获取集合中的第一个元素，以下是几种常见的方式：

使用:first选择器

$('selector:first').method();

:first选择器直接匹配第一个元素，例如$('div:first')会选中页面中第一个<div>元素。

使用.first()方法

$('selector').first().method();

.first()方法从匹配的元素集合中提取第一个元素，例如$('li').first()会返回第一个<li>元素。

使用.eq(0)方法

$('selector').eq(0).method();

.eq(0)通过索引位置获取元素，索引从0开始计数，等同于获取第一个元素。

使用数组索引（需转为DOM对象）

$('selector')[0]; // 返回DOM元素
$('selector').get(0); // 等价写法

通过[0]或.get(0)可获取原生DOM对象，如需继续使用jQuery方法需重新包装为$()。

示例对比

假设HTML结构如下：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

不同写法的实现效果

// 方法1：选择器
$('li:first').css('color', 'red');

// 方法2：.first()
$('li').first().css('background', 'yellow');

// 方法3：.eq(0)
$('li').eq(0).text('Modified Text');

// 方法4：DOM索引（需重新包装）
$($('li')[0]).hide();

注意事项

• :first选择器与.first()性能不同，前者在Sizzle引擎中优先过滤，后者在获取集合后处理。
• 直接获取DOM对象（如[0]）后无法链式调用jQuery方法，需用$()重新包裹。
• 对空集合操作时，所有方法均安全返回空对象，不会报错。