jquery获取第一个元素

jQuery 获取第一个元素的方法

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

使用 :first 选择器

$('selector:first')

此方法直接选择匹配的第一个元素，例如 $('div:first') 会选中页面中第一个 div 元素。

使用 first() 方法

$('selector').first()

此方法从匹配的元素集合中返回第一个元素。例如 $('div').first() 效果与 :first 相同。

使用 eq(0) 方法

$('selector').eq(0)

通过索引获取第一个元素，索引从 0 开始。eq(0) 即表示第一个元素。

使用 get(0) 或 [0] 获取原生 DOM 元素

$('selector').get(0)
// 或
$('selector')[0]

这两种方法会返回原生 DOM 元素而非 jQuery 对象，适合需要直接操作 DOM 的场景。

示例代码

// 获取第一个 div 元素并添加红色边框
$('div:first').css('border', '1px solid red');

// 另一种方式
$('div').first().css('background', 'yellow');

// 通过索引获取
$('div').eq(0).text('这是第一个 div');

// 获取原生 DOM 元素
var firstDiv = $('div')[0];
console.log(firstDiv.innerHTML);

注意事项

• :first 和 first() 返回的是 jQuery 对象，可以继续链式调用其他 jQuery 方法。
• get(0) 和 [0] 返回的是原生 DOM 元素，不能直接使用 jQuery 方法。
• 在大型 DOM 结构中，first() 和 eq(0) 的性能通常优于 :first 选择器。