В чём разница между этими вариантами выборки?

Question

[Елена]

Прошу помочь разобраться, в чём разница между:
1) $("#wrap")[0];
2) $("#wrap");
3) $("#wrap").get(0);
?

Answer 1

[Денис]

$("#wrap") - вернет объект jQuery. И не "все объекты с айдишником wrap", как говорил Pavel K, а один единственный, даже, если кому-то в голову придёт создать на одной странице несколько элементов с одинаковым ID. $("#wrap")[0] === $("#wrap").get(0) - извлекает из объекта DOM-элемент, как если бы мы обращались к нему с помощью нативного JS. Разница между последними только в форме записи: с использованием метода jQuery .get() или по свойству объекта.

Comments

[Елена]

то есть первый или третий и второй способ отбора дадут разные результаты?

[Денис]

Елена, рассматривайте части кода по отдельности. Первая часть во всех трёх вариантах - это получения объекта jQuery (акцентирую на этом внимание!). Вторая часть кода в первом и третьем варианте - это уже работа непосредственно с полученным объектом. То есть, мы обращаемся к его свойствам и методам. Вот очень примитивный пример. Обратите внимание, что библиотека jQuery не подключена, но по сути, мы создали свою микро-библиотеку jQuery ))

[Денис]

P.S. Вот более расширенный пример

[Елена]

просто не понятно, почему этот пример codepen.io/Tont/pen/sDCHq не работает, когда удалишь [0]

[Pavel K]

Елена: потому, что $() возвращает объект jQuery, а не DOM объект.

[Денис]

Елена попробую еще раз. Есть принципиальная разница между объектом jQuery и DOM-элементом. Объект jQuery, кроме всего прочего, содержит и выбранный элемент(ы). Методы jQuery применяются только к объекту jQuery, а в вашем случае метода .play() нет у объекта jQuery, но он применим к DOM-элементу. Поэтому, мы извлекаем элемент из объекта и уже к нему применяем метод .play()

[Елена]

Вы уж извините, что я вас так пытаю, но я пока не получила для себя логичного ответа. Вот нашла на сайте jquery.page2page.ru "Объект jQuery — это javascript-объект, который содержит коллекцию некоторых элементов страницы, а так же обладает множеством методов для работы с ними."
Некоторых - это тех, которые мы указали с помощью селектора в круглых скобках? Просто я никогда в коде jQuery не встречала такой записи (с []). Всё работает и без квадратных скобок.

[Денис]

Просто я никогда в коде jQuery не встречала такой записи (с []).

Елена всё когда-то бывает в первый раз ))

Всё работает и без квадратных скобок.

Работать будет без всяких там квадратных скобок, НО работать будет, если применяемый метод есть в jQuery. Метода .play() в jQuery нет.

[Елена]

Денис: Уже понятнее. Спасибо за терпение! А есть где посмотреть список методов объекта jQuery?

[Денис]

Елена конечно. И на ресурсе, из которого вы процитировали выше и в официальной документации.

[Елена]

Ещё раз спасибо!

[Денис]

Елена на jquery.page2page.ru, в левой колонке есть ссылка "Карта функций". Там основные (не все) методы jQuery

[Елена]

Денис: ещё раз благодарю!

Answer 2

[Pavel K]

1. выбираются все объекты с айдишником wrap и берётся первый
2. выбираются все объекты с айдишником wrap
3. выбираются все объекты с айдишником wrap и берётся первый
через get(n) быстрее, нежели чем через []

UPDT: йа затупок
get() и [] возвращает чистый DOM объект (не будут работать методы jQuery), попутал с eq
во втором случае если указан айдишник, то выберется первый объект, если указан класс, то выберутся все объекты.

Comments

[Константин Громов]

Почему же прямое обращение к свойству должно работать дольше, нежели вызов функции, которая спустя пару действий всё-равно так же обращается к свойству?

[Елена]

А как тогда понимать, что идентификатор определяет уникальный элемент на странице и не может использоваться для двух элементов одновременно?

[Константин Громов]

Елена: Уникальность он определяет, но наличие двух одинаковых айдишников браузеры допускают. Правда у этого бывают порой сложно отслеживаемые неприятности. Насчёт вопроса: jQuery при выборке всегда возвращает псевдомассив, даже если нашёлся всего один элемент. И ситуацию с дубляжом айдишников он обрабатывает и возвращает только первый элемент. Но нативный метод querySelectorAll, например, вернул бы все варианты совпадения селектора.

[Pavel K]

Константин Громов: get() возвращает чистый DOM объект (не буут работать методы jQuery), когда [] возвращает объект jQuery

[Pavel K]

Блин, затупил, попутал get с eq