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

Question 1

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

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

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

Question 2

Я хотел бы понять взаимосвязь между объектом 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()

Question 3

Когда вы используете 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.

Question 4

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

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

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

Question 5

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

Так,

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

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

в то время как ,

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

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

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

(1) В FunctionjQuery есть множество членов, которые относятся к DOM Object. Лучшее, что можно сделать, это выполнить поиск в документации API jQuery, Functionесли у вас есть конкретная задача (например, выбор Nodes или управление ими).

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

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

Question 6

Просто ваш браузер умен. Они оба являются объектами, но DOMElements - это особые объекты. jQuery просто оборачивает DOMElements в объект Javascript.

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

Question 7

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

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

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

Например, набор 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,

// 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 );

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