jQuery: premier contre .first ()

Question

L' .first() méthode a été ajouté dans jQuery 1.4.

L' :first sélecteur a été autour depuis la 1.0.

À partir de la documentation:

:first

L' :first de la pseudo-classe est équivalente à :eq(0). Il pourrait aussi être écrit comme :lt(1). Bien que cela ne correspond qu'à un seul élément, :first-child peut correspondre à plusieurs: Un pour chaque parent.

.first()

Étant donné un objet jQuery qui représente un ensemble d'éléments DOM, .first() méthode construit un nouvel objet jQuery à partir du premier élément correspondant.

---

Il semble qu' .first() est un filtre qui renvoie un autre objet jQuery, tout en :first est juste un sélecteur.

Mais, ils peuvent tous deux être utilisés pour accomplir la même chose.

Alors, quand faut-il être utilisé à la place de l'autre? La Performance? Veuillez fournir des exemples.

Answer 1

Si .first() et :first sont utilisés dans le même contexte, pour obtenir la même information, par exemple:

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() est plus performant

**

Comme mentionné par Andrew Plus, en .first() est l'équivalent d' .eq(0).
Selon jsperf.com, .eq(0) serait le meilleur, mais il n'y a pas de grande différence avec .first().

Vous pouvez voir ma source, ici: http://jsperf.com/first-vs-first-vs-eq-0

Answer 2

.first() peut être utilisé pour sélectionner le premier élément jQuery collection.

Fondamentalement, il évite d'avoir à faire une nouvelle requête ou briser la chaîne dans des situations où vous avez besoin de travailler sur une collection puis exclusivement sur le premier élément.

En fait, l'une des plus coûteuses opérations que vous pouvez le faire en jQuery est une requête. Moins vous en faites, mieux c'est...

Un exemple que je pense dès maintenant, c'est un script de galerie d'images où votre première image par défaut est toujours active, mais vous devez associer un gestionnaire d'événement sur chaque image...

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

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

---

.first() est également sucre syntaxique pour quelque chose qui existe depuis 1.1.2... .eq(0):

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

en fait, c'est la façon dont il est mis en œuvre en jQuery:

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

Answer 3

$('li').css('color', 'red').first().css('color', 'green'); appliquera le filtre après que la collection a déjà été utilisée.

Dans la plupart des cas, j'utiliserais le sélecteur :first car il peut être combiné à de nombreux autres bons sélecteurs , le tout en un seul passage.