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

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.

Answer 1

$('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.

Answer 2

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

Basically, it avoids 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 operation 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 );
}