JQuery: первый против .first()

Метод .first() был добавлен в jQuery 1.4.

Селектор :first существует с 1.0.

Из документов:

:first

Псевдокласс :first эквивалентен :eq(0). Его также можно записать как :lt(1). Хотя это соответствует только одному элементу, :first-child может соответствовать более одного: один для каждого родителя.

.first()

Учитывая объект jQuery, представляющий набор элементов DOM, метод .first() создает новый объект jQuery из первого соответствующего элемента.

Кажется, что .first() - это фильтр, который возвращает другой объект jQuery, а :first - это просто селектор.

Но они оба могут использоваться для достижения того же самого.

Итак, когда следует использовать вместо другого? Представление? Приведите примеры.

Ответы

Ответ 1

.first() может использоваться для выбора первого элемента в коллекции jQuery.

В принципе, он избегает необходимости выполнять новый запрос или прерывать цепочку в ситуациях, когда вам нужно работать с коллекцией, а затем исключительно на первом элементе.

На самом деле одной из самых дорогостоящих операций, которые вы можете выполнить в jQuery, является запрос. Чем меньше вы делаете, тем лучше...

В качестве примера можно привести галерею изображений script, где ваше первое изображение всегда является активным по умолчанию, но вам нужно прикрепить обработчик событий на каждое изображение...

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

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

.first() также является синтаксическим сахаром для чего-то, что существует с 1.1.2... .eq(0):

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

на самом деле, как это реализовано в самом jQuery:

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

Ответ 2

Если .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() более эффективен

** enter image description here

Как упоминалось Эндрю Мур, .first() является эквивалентом .eq(0).
Согласно jsperf.com, .eq(0) будет лучшим, но нет большой разницы с .first().

Вы можете увидеть мой источник, здесь: http://jsperf.com/first-vs-first-vs-eq-0

Ответ 3

$('li').css('color', 'red').first().css('color', 'green'); применит фильтр после того, как коллекция уже была использована.

В большинстве случаев я бы использовал селектор :first, так как он может быть объединен с так много других хороших селекторов, все в одной развертке.

Ответ 4

Псевдо-селектор : первый и first() могут делать то же самое.

Что касается производительности, здесь представлен живой пример разницы в производительности между jQuery first():: first, eq (0) и: nth (0).

http://jsperf.com/jquery-first-vs-first-selector, пожалуйста, проверьте это!

Надеюсь, это поможет.