jQuery：首先与.first（）

.first()方法是在jQuery 1.4中添加的。

第:firstselect器从1.0开始就已经出现了。

从文档：

:first

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

.first()

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

---

看来， .first()是一个filter，返回另一个jQuery对象，而:first只是一个select器。

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

那么，什么时候应该使用一个而不是另一个呢？ 性能？ 请举例说明。

Answer 1

.first()可以用来selectjQuery集合中的第一个元素。

基本上，它避免了必须做一个新的查询，或在需要处理一个集合，然后专门处理第一个元素的情况下打破链条。

实际上，在jQuery中最昂贵的操作之一就是查询。 你做的越less越好

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

 $('#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 2

如果.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所提到的， .eq(0)与.eq(0)等价。
根据jsperf.com ， .eq(0)将是最好的，但与.eq(0)没有太大的区别。

你可以在这里看到我的源代码： http : //jsperf.com/first-vs-first-vs-eq-0

Answer 3

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

在大多数情况下，我会使用select器:first因为它可以与许多其他好的select器组合在一起。

Answer 4

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

至于性能，下面是jQuery first（），首先，eq（0）和：n（0）之间性能差异的一个实例 。

http://jsperf.com/jquery-first-vs-first-selector ，请检查出来！

希望这会有所帮助。