jQuery :first 与 .first()

jQuery :first vs. .first()

提问by ScottE

The .first()method was added in jQuery 1.4.

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

The :firstselector has been around since 1.0.

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

From the docs:

从文档：

:first

The :firstpseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-childcan match more than one: One for each parent.

.first()

Given a jQuery object that represents a set of DOM elements, the .first()method constructs a new jQuery object from the first matching element.

:first

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

.first()

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

---

---

It seems that .first()is a filter that returns another jQuery object, while :firstis just a selector.

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

But, they can both be used to accomplish the same thing.

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

So, when should one be used instead of the other? Performance? Please provide examples.

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

采纳答案by Andrew Moore

.first()can be used to select the first element in a jQuery collection.

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

Basically, it avoids having to do a new query or break the chain in situations when you need to work on a collection and then exclusively on the first element.

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

Actually, one of the most costly operations you can do in jQuery is a query. The less you do, the better it is...

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

One example I can think of right now is an image gallery script where your first image is always the default active one, yet you need to attach an event handler on each image...

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

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

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

---

---

.first()is also syntactic sugar for something that exists since 1.1.2... .eq(0):

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

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

in fact, that's how it is implemented in jQuery itself:

事实上，这就是它在 jQuery 本身中的实现方式：

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

回答by Simon Arnold

If .first()and :firstare used in the same contextto get the same information, example:

Html:

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

Html：

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

Script:

脚本：

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

.first()is more performant

.first()性能更高

**

**

As mentionned by Andrew Moore, .first()is the equivalent of .eq(0).
According to jsperf.com, .eq(0)would be the best, but there is no big difference with .first().

正如 Andrew Moore 所提到的，.first()相当于.eq(0).
根据jsperf.com，.eq(0)将是最好的，但与.first().

You can see my source, here: http://jsperf.com/first-vs-first-vs-eq-0

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

回答by chelmertz

$('li').css('color', 'red').first().css('color', 'green');would apply the filter after the collection already has been utilised.

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

In most cases I would use the selector :firstsince it can be combined with so many other nice selectors, all in one sweep.

在大多数情况下，我会使用选择器，:first因为它可以与许多其他不错的选择器结合使用，全部一次性完成。

回答by Jerry Liu

The :firstpseudo selector and first()can do the same thing.

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

As for performance, here is a live exampleof performance difference between jQuery first(),:first, eq(0) and :nth(0).

至于性能，这里是jQuery first(),:first, eq(0) 和:nth(0) 之间性能差异的一个活生生的例子。

http://jsperf.com/jquery-first-vs-first-selector, Please check it out!

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

Hope this will help.

希望这会有所帮助。