Объект jQuery и элемент DOM

Ответ 1

Я хотел бы понять взаимосвязь между объектом jQuery и элементом DOM

Объект jQuery - это объект, похожий на массив, содержащий элементы (элементы) DOM. Объект jQuery может содержать несколько элементов DOM в зависимости от используемого вами селектора.

Также какие методы могут работать с объектом jQuery vs DOM? Может ли один объект jQuery представлять собой несколько элементов DOM?

Функции jQuery (полный список на сайте) работают с объектами jQuery, а не с элементами DOM. Вы можете получить доступ к элементам DOM внутри функции jQuery с помощью .get() или напрямую обращаться к элементу с нужным индексом:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

Другими словами, следующее должно получить тот же результат:

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

Для получения дополнительной информации о объекте jQuery см. документацию. Также ознакомьтесь с документацией для .get()

Ответ 2

Когда вы используете jQuery для получения элемента DOM, объект jQuery возвращает ссылку на элемент. Когда вы используете встроенную функцию типа getElementById, вы получаете ссылку на элемент напрямую, не содержащийся в объекте jQuery.

Объект jQuery представляет собой объект, подобный массиву, который может содержать несколько элементов DOM:

var jQueryCollection = $("div"); //Contains all div elements in DOM

Вышеуказанная строка может быть выполнена без jQuery:

var normalCollection = document.getElementsByTagName("div");

Фактически, именно то, что jQuery будет делать внутренне, когда вы передаете простой селектор, например div. Вы можете получить доступ к фактическим элементам в коллекции jQuery с помощью метода get:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

Когда у вас есть элемент или набор элементов внутри объекта jQuery, вы можете использовать любой из методов, доступных в API jQuery, тогда как когда у вас есть исходный элемент, вы можете использовать только собственные методы JavaScript.

Ответ 3

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

Скажем, что вы находитесь в функции и ссылаетесь на вызывающий элемент, вы можете использовать this или $(this); но в чем разница? Оказывается, когда вы используете $(this), вы обертываете this внутри объекта jQuery. Преимущество состоит в том, что, когда объект является объектом jQuery, вы можете использовать на нем все функции jQuery.

Это довольно мощно, поскольку вы можете даже обернуть строковое представление элементов var s = '<div>hello <a href='#'>world</a></div><span>!</span>' внутри объекта jQuery, просто буквально завернув его в $(): $(s). Теперь вы можете манипулировать всеми этими элементами с помощью jQuery.

Ответ 4

Большинство членов jQuery Functions не имеют возвращаемого значения, а скорее возвращают текущий jQuery Object или другой jQuery Object.

Итак,

console.log("(!!) jquery >> " + $("#id") ) ; 

вернет [object Object], т.е. a jQuery Object, который поддерживает коллекцию, которая является результатом оценки селектора String ("#id") в отношении Document,

while,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

вернет [object HTMLDivElement] (или фактически [object Object] в IE), потому что/если возвращаемое значение равно div Element.

Также какие методы могут работать с объектом jQuery vs DOM? (1) Может ли один объект jQuery представлять собой несколько элементов DOM? (2)

(1) В jQuery есть хост члена Function, который относится к DOM Object s. Лучшее, что нужно сделать imo, - это найти документацию API jQuery для соответствующего Function после того, как у вас есть конкретная задача (например, выбор Node или управление ими). ​​

• Документация jQuery

(2) Да, один jQuery Object может содержать список из нескольких DOM Element s. Существует несколько Functions (например, jQuery.find или jQuery.each), которые основываются на этом автоматическом кэшировании.

Ответ 5

Это просто ваш браузер умный. Это оба объекта, но DOMElements - это специальные объекты. jQuery просто переносит DOMElements в объект Javascript.

Если вы хотите получить дополнительную информацию об отладке, я рекомендую вам взглянуть на инструменты отладки, такие как Firebug для Firefox и встроенный инспектор Chrome (очень похожий на Firebug).