Unterschiede zwischen JavaScript-Objekten, DOM-Objekten und JQuery-Objekten sowie detaillierte Erklärungen zur Konvertierung

1. JavaScript-Objekte

JavaScript bietet mehrere integrierte Objekte wie String, Date, Array usw.

Objekte sind nur spezielle Datentypen mit Eigenschaften und Methoden.

Zugriff auf die Eigenschaften des Objekts:

[javascript]

var message="Hello World!";

JavaScript-Objekt erstellen:

[javascript]

person=new Object();

person.firstname="Bill ";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

Objektkonstruktor verwenden:

[javascript] Klartext anzeigen

Funktion Person(Vorname, Nachname, Alter, Augenfarbe)

{

dies . firstname=firstname;

this.lastname=age

this.eyecolor=eyecolor;

var myFather=neue Person("Bill","Gates",56,"blue");

var myMother=neue Person("Steve", "Jobs",48,"green") ;

2. DOM-Objekt

DOM ist eigentlich ein objektorientiertes Dokumentmodell. Das DOM definiert die Objekte, die zum Darstellen und Ändern eines Dokuments erforderlich sind, das Verhalten und die Eigenschaften dieser Objekte sowie die Beziehungen zwischen diesen Objekten.

Gemäß der W3C-DOM-Spezifikation ist DOM die Anwendungsprogrammierschnittstelle (API) von HTML und XML.

Über das DOM können Sie auf alle HTML-Elemente sowie den darin enthaltenen Text und die Attribute zugreifen. Der Inhalt kann geändert und gelöscht werden, außerdem können neue Elemente erstellt werden.

HTML DOM ist plattform- und programmiersprachenunabhängig. Es kann von jeder Programmiersprache wie Java, JavaScript und VBScript verwendet werden.

DOM-Objekt ist das Objekt, das wir mit herkömmlichen Methoden (Javascript) erhalten.

3. jQuery-Objekt

Das jQuery-Objekt ist eigentlich ein Javascript-Array

Dieses Array-Objekt enthält 125 Methoden und 4 Eigenschaften

Die vier Attribute sind

jquery Die aktuelle Versionsnummer des JQuery-Frameworks

Länge Gibt die Anzahl der Elemente des Array-Objekts an

Kontext Zeigt im Allgemeinen auf das HtmlDocument-Objekt

selector Übergeben in Selektorinhalten wie: #yourId oder .yourClass usw.

Wenn Sie das Jquery-Objekt über die Methode $("#yourId") erhalten,

Und es gibt nur ein Element mit der ID yourId auf Ihrer Seite

Dann ist $("#yourId")[0] das HtmlElement-Element

und document.getElementById("yourId ") Die erhaltenen Elemente sind die gleichen

Ein einfaches Verständnis ist, dass das von jQuery erstellte Objekt

jQuery-Objekt das Objekt ist, das durch Umschließen des DOM-Objekts durch jQuery generiert wird. Das jQuery-Objekt ist einzigartig für jQuery. Es kann Methoden in jQuery verwenden, aber keine DOM-Methoden

4. Der Unterschied zwischen DOM-Objekten und jQuery-Objekten

[ Javascript ]

var domObj = document.getElementById("id"); //DOM object

var $obj = $("#id"); //jQuery object; 🎜>[javascript]

$("#img").attr("src","test.jpg"); //$("#img") hier soll das jQuery-Objekt abgerufen werden; 🎜>

[javascript]

document.getElementById(“img”).src=“test.jpg”;//Das document.getElementById(“img”) ist hier das DOM-Objekt; >

Ein weiteres Beispiel: Wenn ich jQuery schreibe, schreibe ich oft so:

this.attr(„src“,test.jpg“);

Aber es ist ein Fehler. Tatsächlich ist dies ein DOM-Objekt und

.attr("src","test.jpg")

ist eine jQuery-Methode, also ist etwas schief gelaufen. Um dieses Problem zu lösen, müssen Sie das DOM-Objekt in ein jQuery-Objekt konvertieren, zum Beispiel:

$(this).attr("src","test.jpg");

5. Konvertierung von DOM-Objekten und JQuery-Objekten

Konvertieren von DOM-Objekten in jQuery-Objekte:

Für ein DOM-Objekt, das bereits ein DOM-Objekt ist, verwenden Sie einfach $() um das DOM-Objekt zu umschließen, kann ein jQuery-Objekt abgerufen werden.

Methode: $(DOM-Objekt)

[javascript]

var v=document.getElementById(“v”); //DOM-Objekt

var $v=$(v); //jQuery-Objekt

jQuery-Objekt in DOM-Objekt:

Zwei Konvertierungsmethoden zum Konvertieren eines jQuery-Objekts in ein DOM-Objekt: [index] und .get(index);

(1) Das jQuery-Objekt ist ein Datenobjekt, und das entsprechende DOM-Objekt kann über die Methode [index] abgerufen werden.

[javascript]

var $v =$(“#v”); //jQuery-Objekt

var v=$v[0]; //DOM-Objekt

alert(v.checked) //Erkennen Sie, ob dieses Kontrollkästchen aktiviert ist

(2) jQuery selbst stellt über die .get(index)-Methode das Abrufen bereit entsprechendes DOM-Objekt.

[javascript]

var $v=$(“#v”); //jQuery-Objekt

var v=$v.get(0); DOM-Objekt

alert(v.checked) //Erkennen, ob dieses Kontrollkästchen aktiviert ist