jQuery об'єкт і елемент DOM

Я хотів би зрозуміти взаємозв'язок між об'єктом jQuery та елементом DOM ..

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

Також які методи можуть працювати на об’єкті jQuery проти елементу DOM? Чи може один об’єкт jQuery представляти кілька елементів DOM?

Я хотів би зрозуміти взаємозв'язок між об'єктом 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()

Коли ви використовуєте 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.

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

Скажімо, ви перебуваєте у функції, і для посилання на викличний елемент ви можете або використовувати this, або $(this); але в чому різниця? Виявляється, коли ви використовуєте $(this), ви загортаєте thisвсередину об’єкта jQuery. Перевага полягає в тому, що коли об’єкт є об’єктом jQuery, ви можете використовувати всі функції jQuery на ньому.

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

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

Так,

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

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

поки,

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

поверне [object HTMLDivElement](або насправді [object Object]в IE), оскільки / якщо значенням повернення є a div Element.

Також які методи можуть працювати на об’єкті jQuery проти елементу DOM? (1) Чи може один об’єкт jQuery представляти кілька елементів DOM? (2)

(1) У FunctionjQuery є безліч членів , які відносяться до DOM Object. Найкраще, що потрібно зробити imo - це шукати відповідну документацію API jQuery, Functionколи у вас є конкретне завдання (наприклад, вибір Nodes або маніпулювання ними).

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

(2) Так, одиночний jQuery Objectможе вести список декількох DOM Element. Є декілька Functions(таких як jQuery.findабо jQuery.each), які базуються на цій поведінці автоматичного кешування.

Це просто ваш розумний браузер. Вони обидва об'єкти, але DOMElements - це спеціальні об'єкти. jQuery просто обгортає DOMElements в об'єкт Javascript.

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

Окрім того, що вже було згадано, я хотів би додати щось про те, чому об’єкт 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,

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

Сподіваюся, це доповнення.