jQuery：第一次与.first（）

Question

jQuery 1.4中添加了.first()方法。

:first选择器自1.0以来一直存在。

来自文档：

  

:first

     

:first伪类等同于:eq(0)。它也可以写成:lt(1)。虽然这只匹配一个元素，但:first-child可以匹配多个：每个父元素一个。

     

.first()

     

给定一个表示一组DOM元素的jQuery对象，.first()方法从第一个匹配元素构造一个新的jQuery对象。

---

似乎.first()是一个返回另一个jQuery对象的过滤器，而:first只是一个选择器。

但是，它们都可以用来完成同样的事情。

那么，何时应该使用一个而不是另一个？性能？请提供示例。

Answer 1

如果在相同的上下文中使用.first()和:first来获取相同的信息，例如：
的 HTML：

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<强>脚本：

console.log("1", $('ul li').first().text());
console.log("2", $('ul li:first').text());

.first()性能更高

**

正如Andrew Moore所提到的，.first()相当于.eq(0) 根据{{​​3}}，.eq(0)是最好的，但与.first()没有太大区别。

您可以在此处查看我的来源：jsperf.com

Answer 2

.first()可用于选择jQuery集合中的第一个元素。

基本上，它避免了在需要处理集合然后专门处理第一个元素时必须执行新查询或中断链。

实际上，你可以在jQuery中执行的最昂贵的操作之一是查询。你做得越少越好......

我现在能想到的一个例子是图片库脚本，其中您的第一张图片始终是默认的活动图片，但您需要在每张图片上附加一个事件处理程序......

$('#gallery img').click(myFunc).first().addClass('active');

// Instead of
$('#gallery img').click(myFunc);
$('#gallery img:first').addClass('active');

---

.first()也是自1.1.2以来存在的东西的语法糖... .eq(0)：

$('#gallery img').click(myFunc).eq(0).addClass('active');

实际上，这就是jQuery本身的实现方式：

first: function() {
  return this.eq( 0 );
}

Answer 3

$('li').css('color', 'red').first().css('color', 'green');将在已经使用过收集后应用过滤器。

在大多数情况下，我会使用选择器:first，因为它可以与so many other nice selectors结合使用，一次扫描。

Answer 4

：第一个伪选择器和第一个（）可以做同样的事情。

至于性能，这里是jQuery first（），：first，eq（0）和：nth（0）之间性能差异的实例。

http://jsperf.com/jquery-first-vs-first-selector ，请查看！

希望这会有所帮助。