obiekt jQuery i element DOM

Chciałbym zrozumieć związek między obiektem jQuery a elementem DOM.

Kiedy jQuery zwraca element, pojawia się jak [object Object]w alercie. Kiedy getElementByIDzwraca element, pojawia się jako [object HTMLDivElement]. Co to dokładnie oznacza? Chodzi mi o to, czy oba z nich różnią się obiektami?

Jakie metody mogą działać na obiekcie jQuery w porównaniu z elementem DOM? Czy pojedynczy obiekt jQuery może reprezentować wiele elementów DOM?

Chciałbym zrozumieć związek między obiektem jQuery a elementem DOM

Obiekt jQuery to obiekt przypominający tablicę, który zawiera elementy DOM. Obiekt jQuery może zawierać wiele elementów DOM w zależności od używanego selektora.

Jakie metody mogą działać na obiekcie jQuery w porównaniu z elementem DOM? Czy pojedynczy obiekt jQuery może reprezentować wiele elementów DOM?

Funkcje jQuery (pełna lista na stronie) działają na obiektach jQuery, a nie na elementach DOM. Możesz uzyskać dostęp do elementów DOM wewnątrz funkcji jQuery, używając .get()lub uzyskując dostęp bezpośrednio do elementu w żądanym indeksie:

$("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

Innymi słowy, następujące wyniki powinny dać ten sam wynik:

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

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

Więcej informacji na temat obiektu jQuery można znaleźć w dokumentacji . Zapoznaj się również z dokumentacją dotyczącą.get()

Gdy używasz jQuery do uzyskania elementu DOM, zwracany obiekt jQuery zawiera odniesienie do elementu. Korzystając z funkcji natywnej, takiej jak getElementById, otrzymujesz odwołanie do elementu bezpośrednio, a nie zawarte w obiekcie jQuery.

Obiekt jQuery to obiekt przypominający tablicę, który może zawierać wiele elementów DOM:

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

Powyższa linia mogłaby zostać wykonana bez jQuery:

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

W rzeczywistości to jest dokładnie to, co jQuery zrobi wewnętrznie, gdy przekażesz prosty selektor, taki jak div. Możesz uzyskać dostęp do rzeczywistych elementów w kolekcji jQuery za pomocą getmetody:

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

Gdy masz element lub zestaw elementów wewnątrz obiektu jQuery, możesz użyć dowolnej z metod dostępnych w interfejsie API jQuery, natomiast mając element surowy, możesz używać tylko natywnych metod JavaScript.

Ledwo zacząłem bawić się jQuery w zeszłym miesiącu i miałem podobne pytanie. Wszystkie dotychczas otrzymane odpowiedzi są poprawne i trafne, ale bardzo precyzyjna odpowiedź może brzmieć:

Powiedzmy, że jesteś w funkcji i aby odnieść się do elementu wywołującego, możesz użyć thisalbo $(this); ale jaka jest różnica? Okazuje się, gdy używasz $(this), jesteś zawijania thiswewnątrz obiektu jQuery. Zaletą jest to, że gdy obiekt jest obiektem jQuery, można używać wszystkich funkcji jQuery na nim.

Jest to dość silny, ponieważ można jeszcze zawinąć reprezentację ciąg elementów var s = '<div>hello <a href='#'>world</a></div><span>!</span>', wewnątrz obiektu jQuery tylko przez dosłownie owijając go w $ () $(s). Teraz możesz manipulować wszystkimi tymi elementami za pomocą jQuery.

Większość elementów członkowskich jQuery Functionsnie ma wartości zwracanej, ale zwraca wartość bieżącą jQuery Objectlub inną jQuery Object.

Więc,

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

zwróci [object Object], czyli a jQuery Objectktóry utrzymuje kolekcję będącą wynikiem oceny selector String( "#id") względem Document,

podczas ,

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

zwróci [object HTMLDivElement](lub w rzeczywistości [object Object]w IE), ponieważ / jeśli zwracana wartość to div Element.

Jakie metody mogą działać na obiekcie jQuery w porównaniu z elementem DOM? (1) Czy pojedynczy obiekt jQuery może reprezentować wiele elementów DOM? (2)

(1) Istnieje wiele elementów członkowskich Functionw jQuery, które odnoszą się do DOM Object. Najlepszą rzeczą do zrobienia imo jest przeszukanie dokumentacji jQuery API w celu znalezienia odpowiedniego, Functiongdy masz określone zadanie (takie jak wybieranie Nodeplików lub manipulowanie nimi).

• Dokumentacja jQuery

(2) Tak, jeden jQuery Objectmoże prowadzić listę wielu DOM Element. Istnieje wiele Functions(takich jak jQuery.findlub jQuery.each), które opierają się na tym automatycznym buforowaniu.

Po prostu twoja przeglądarka jest sprytna. Oba są obiektami, ale DOMElements to specjalne obiekty. jQuery po prostu opakowuje DOMElements w obiekt Javascript.

Jeśli chcesz uzyskać więcej informacji o debugowaniu, polecam zapoznać się z narzędziami debugującymi, takimi jak Firebug dla przeglądarki Firefox i wbudowany inspektor Chrome (bardzo podobny do Firebug).

Poza tym, co zostało wspomniane, chciałbym dodać coś o tym, dlaczego obiekt jQuery jest importowany zgodnie z opisem z jquery-object

• Zgodność

Implementacja metod elementów różni się w zależności od dostawców i wersji przeglądarek.

Na przykład zestaw innerHTMLelementów może nie działać w większości wersji przeglądarki Internet Explorer.

Możesz ustawić innerHTML w sposób jQuery, a jQuery pomoże Ci ukryć różnice między przeglądarkami.

// Setting the inner HTML with jQuery.

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

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

• Wygoda

jQuery udostępnia listę metod związanych z obiektem jQuery, które ułatwiają pracę programistów. Niektóre z nich można znaleźć pod adresem http://api.jquery.com/ . Witryna zapewnia również typową manipulację DOM, zobaczmy, jak wstawić element przechowywany newElementpo targetelemencie w obie strony.

Sposób 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 );

Sposób jQuery,

// Inserting a new element after another with jQuery.

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

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

$( target ).after( newElement );

Mam nadzieję, że to dodatek.