Ich möchte die Beziehung zwischen dem jQuery-Objekt und dem DOM-Element verstehen.
Wenn jQuery ein Element zurückgibt, wird es wie [object Object]in einer Warnung angezeigt. Wenn getElementByIDein Element zurückgegeben wird, wird es als angezeigt [object HTMLDivElement]. Was bedeutet das genau? Ich meine, sind beide Objekte unterschiedlich?
Welche Methoden können auch für jQuery-Objekte und DOM-Elemente ausgeführt werden? Kann ein einzelnes jQuery-Objekt mehrere DOM-Elemente darstellen?
Antworten:
Ich möchte die Beziehung zwischen dem jQuery-Objekt und dem DOM-Element verstehen
Ein jQuery-Objekt ist ein Array-ähnliches Objekt, das DOM-Elemente enthält. Ein jQuery-Objekt kann je nach verwendetem Selektor mehrere DOM-Elemente enthalten.
Welche Methoden können auch für jQuery-Objekte und DOM-Elemente ausgeführt werden? Kann ein einzelnes jQuery-Objekt mehrere DOM-Elemente darstellen?
jQuery-Funktionen (eine vollständige Liste finden Sie auf der Website) werden für jQuery-Objekte und nicht für DOM-Elemente ausgeführt. Sie können auf die DOM-Elemente innerhalb einer jQuery-Funktion .get()zugreifen, indem Sie das Element am gewünschten Index verwenden oder direkt darauf zugreifen:
$("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
Mit anderen Worten, mit dem folgenden Ergebnis sollten Sie das gleiche Ergebnis erzielen:
<div id="foo"></div>
alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));
Weitere Informationen zum jQuery-Objekt finden Sie in der Dokumentation . Lesen Sie auch die Dokumentation für.get()
Wenn Sie jQuery verwenden, um ein DOM-Element abzurufen, enthält das zurückgegebene jQuery-Objekt einen Verweis auf das Element. Wenn Sie eine native Funktion wie verwenden getElementById, erhalten Sie den Verweis direkt auf das Element, das nicht in einem jQuery-Objekt enthalten ist.
Ein jQuery-Objekt ist ein Array-ähnliches Objekt, das mehrere DOM-Elemente enthalten kann:
var jQueryCollection = $("div"); //Contains all div elements in DOM
Die obige Zeile könnte ohne jQuery ausgeführt werden:
var normalCollection = document.getElementsByTagName("div");
Genau das macht jQuery intern, wenn Sie einen einfachen Selektor wie übergeben div. Sie können mit der folgenden getMethode auf die tatsächlichen Elemente in einer jQuery-Auflistung zugreifen :
var div1 = jQueryCollection.get(0); //Gets the first element in the collection
Wenn Sie ein Element oder eine Gruppe von Elementen in einem jQuery-Objekt haben, können Sie eine der in der jQuery-API verfügbaren Methoden verwenden, während Sie bei Verwendung des Raw-Elements nur native JavaScript-Methoden verwenden können.
Ich habe letzten Monat gerade erst angefangen, mit jQuery zu spielen, und ich hatte eine ähnliche Frage im Kopf. Alle Antworten, die Sie bisher erhalten haben, sind gültig und pünktlich, aber eine sehr genaue Antwort kann folgende sein:
Angenommen, Sie befinden sich in einer Funktion, und um auf das aufrufende Element zu verweisen, können Sie entweder thisoder verwenden $(this). aber was ist der Unterschied? Es stellte sich heraus, wenn Sie $(this), Sie Verpackung sind thisin einem jQuery - Objekt. Der Vorteil besteht darin, dass Sie, sobald ein Objekt ein jQuery-Objekt ist, alle jQuery-Funktionen darauf verwenden können.
Es ist ziemlich mächtig, da Sie sogar eine Zeichenfolgendarstellung von Elementen var s = '<div>hello <a href='#'>world</a></div><span>!</span>'in ein jQuery-Objekt einschließen können, indem Sie es buchstäblich in $ () einschließen : $(s). Jetzt können Sie alle diese Elemente mit jQuery bearbeiten.
Die meisten jQuery-Mitglieder Functionshaben keinen Rückgabewert, sondern geben den aktuellen jQuery Objectoder einen anderen zurück jQuery Object.
Damit,
console.log("(!!) jquery >> " + $("#id") ) ;
wird zurückkehren [object Object], dh a, jQuery Objectdas die Sammlung beibehält, die das Ergebnis der Bewertung des Selektors String( "#id") gegen das ist Document,
während,
console.log("(!!) getElementById >> " + document.getElementById("id") ) ;
wird zurückgeben [object HTMLDivElement](oder tatsächlich [object Object]im IE), weil / wenn der Rückgabewert a ist div Element.
Welche Methoden können auch für jQuery-Objekte und DOM-Elemente ausgeführt werden? (1) Kann ein einzelnes jQuery-Objekt mehrere DOM-Elemente darstellen? (2)
(1) FunctionIn jQuery gibt es eine Vielzahl von Mitgliedern , die sich auf DOMs beziehen Object. Imo durchsuchen Sie am besten die jQuery-API-Dokumentation nach einer relevanten FunctionAufgabe, sobald Sie eine bestimmte Aufgabe haben (z. B. Nodes auswählen oder bearbeiten).
(2) Ja, ein einzelner jQuery Objectkann eine Liste mehrerer DOMs führen Element. Es gibt mehrere Functions(wie jQuery.findoder jQuery.each), die auf diesem automatischen Caching-Verhalten aufbauen.
[object Object]wäre das allerdings noch ein div Element. Bei Auswahl mit jQuery wäre es a jQuery Object.
Das ist nur, dass Ihr Browser klug ist. Sie sind beide Objekte, aber DOMElements sind spezielle Objekte. jQuery verpackt DOMElements nur in ein Javascript-Objekt.
Wenn Sie weitere Debug-Informationen erhalten möchten, empfehlen wir Ihnen, sich Debugging-Tools wie Firebug for Firefox und den integrierten Inspektor von Chrome (sehr ähnlich zu Firebug) anzusehen.
Neben dem, was erwähnt wurde, möchte ich etwas darüber hinzufügen, warum das jQuery-Objekt gemäß der Beschreibung aus dem jquery-Objekt importiert wird
Die Implementierung von Elementmethoden variiert je nach Browser-Anbieter und -Versionen.
Beispielsweise innerHTMLfunktioniert die Elementmenge in den meisten Versionen von Internet Explorer möglicherweise nicht.
Sie können innerHTML auf jQuery-Weise festlegen, und jQuery hilft Ihnen dabei, die Unterschiede des Browsers zu verbergen.
// Setting the inner HTML with jQuery.
var target = document.getElementById( "target" );
$( target ).html( "<td>Hello <b>World</b>!</td>" );
jQuery bietet eine Liste von Methoden, die an das jQuery-Objekt gebunden sind, um die Entwicklererfahrung zu verbessern . Einige davon finden Sie unter http://api.jquery.com/ . Die Website bietet auch eine allgemeine DOM-Manipulation. Sehen wir uns an, wie Sie ein Element, das newElementnach dem targetElement gespeichert ist, auf beide Arten einfügen .
Der DOM-Weg,
// 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 );
Der jQuery-Weg,
// Inserting a new element after another with jQuery.
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
$( target ).after( newElement );
Hoffe das ist eine Ergänzung.