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

Question

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

Когда jQuery возвращает элемент, он отображается как [object Object] в предупреждении.Когда getElementByID возвращает элемент, он отображается как [object HTMLDivElement].Что именно это значит?Я имею в виду, что оба они являются объектами с разницей?

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

Answer 1

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

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

Какие методы могут работать с объектом jQuery против элемента 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()

Answer 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, вы можете использовать любой из методов, доступных в jQuery API, тогда как при наличии необработанного элемента вы можете использовать только собственные методы JavaScript.

Answer 3

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

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

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

Answer 4

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

---

Итак,

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

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

while,

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

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

---

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

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

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

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

Answer 5

Это просто умный браузер. Они оба являются объектами, но DOMElements являются специальными объектами. jQuery просто оборачивает DOMElements в объект Javascript.

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

Answer 6

Помимо того, что было упомянуто, я хотел бы добавить кое-что о том, почему объект jQuery импортируется в соответствии с описанием из jquery-object

• Совместимость

Реализация методов элемента зависит от поставщика браузера и его версии.

Например, установка innerHTML элемента может не работать в большинстве версий Internet Explorer.

Вы можете установить innerHTML способом jQuery, а jQuery поможет вам скрыть различия браузера.

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );

• Удобство

jQuery предоставляет список методов, привязанных к объекту jQuery, чтобы сгладить опыт разработчика, пожалуйста, проверьте некоторые из них в http://api.jquery.com/. На веб-сайте также есть общие манипуляции с DOM, давайте посмотрим, как вставить элемент, хранящийся в newElement после элемента target в обе стороны.

DOM way,

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

Способ jQuery,

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

Надеюсь, это дополнение.