jQuery:第一次与.first()

Question

该.first()方法已在jQuery 1.4中添加.

该:first自1.0选择已经存在了.

来自文档:

:first

该:first伪类相当于:eq(0).它也可以写成:lt(1).虽然这只匹配一个元素,但:first-child可以匹配多个:每个父元素一个.

.first()

给定一个表示一组DOM元素的.first()jQuery对象,该方法从第一个匹配元素构造一个新的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).
根据jsperf.com,.eq(0)将是最好的,但没有太大的区别.first().

您可以在此处查看我的来源:http://jsperf.com/first-vs-first-vs-eq-0

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 );
}