Разница между $ ('. Huyen') и $ ('. Huyen') [0]

Question

Чем отличаются $(".huyen")[0].style.opacity и $(".huyen").style.opacity?

Когда я использую console.log, чтобы распечатать возвращаемое значение двух операторов:

$(".huyen")[0] ----> [объект HTMLDivElement]

$(".huyen") -----> [объект HTMLCollection]

Я не понимаю, что такое [0], а что нет [0].

Можете ли вы объяснить мне об этой проблеме?

Answer 1

При создании новых элементов (или выборе существующих), jQuery возвращает элементы в коллекции. Многие разработчики, плохо знакомые с jQuery, предполагают, что эта коллекция является массивом. В конце концов, он имеет нулевую последовательность элементов DOM, некоторые знакомые функции массива и свойство .length. На самом деле, объект jQuery более сложный, чем этот.

См. Подробнее: https://learn.jquery.com/using-jquery-core/jquery-object/

Поэтому, когда вы звоните:

$(".huyen")

Это представляет jQuery Объект. В этом объекте есть несколько элементов. Первый элемент можно вызвать по индексу 0:

$(".huyen")[0]

Например, когда вы используете:

$(".huyen")[0].style.opacity = 0.95;

Это позволяет получить доступ к элементам DOM и изменить стиль. Чтобы сделать это в jQuery, вы можете сделать:

$(".huyen").css("opacity", 0.95);

.css() - это специфицированная c функция в коллекции этого jQuery Object.

Answer 2

$(".huyen") возвращает ссылку на объект jQuery. $(".huyen")[0] ссылается на первый узел DOM, который объект jQuery содержит в своей коллекции HTML элементов (если есть).