jQuery :first vs. .first()

Question

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

The :first selector has been around since 1.0.

From the docs:

:first

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

$('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 so many other nice selectors, all in one sweep.