jQuery :first vs. .first()

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

The :first selector has been around since 1.0.

From the docs:

> :first > > The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can 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.

---

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

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.

If .first() and :first are used in the same context to get the same information, example:

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

**

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().

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

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

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...

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):

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

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

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

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

In most cases I would use the selector :first since it can be combined with http://api.jquery.com/category/selectors/">so many other nice selectors, all in one sweep.

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

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

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

Hope this will help.