Heim  >  Artikel  >  Web-Frontend  >  Detaillierter Beispielcode für die Konvertierung von JQuery-Objekten und DOM-Objekten ineinander

Detaillierter Beispielcode für die Konvertierung von JQuery-Objekten und DOM-Objekten ineinander

伊谢尔伦
伊谢尔伦Original
2017-07-20 10:48:531373Durchsuche

jQuery-Objekte sind Objekte, die durch Umschließen von DOM-Objekten mit jQuery generiert werden. Das jQuery-Objekt ist einzigartig für jQuery, kann jedoch keine DOM-Methoden verwenden, zum Beispiel: $("#img").attr("src","test.jpg"); img") ist das jQuery-Objekt.

DOM-Objekte sind einige in Javascript inhärente Objektoperationen. DOM-Objekte können in Javascript inhärente Methoden verwenden, jedoch keine Methoden in jQuery. Zum Beispiel: document.getElementById("img").src = "test.jpg"; document.getElementById("img") ist hier das DOM-Objekt.

$("#img").attr("src","test.jpg"); entspricht document.getElementById("img").src = "test.jpg"; aber $("#img").src = "test.jpg"; oder document.getElementById("img").attr("src","test.jpg");

Ein weiteres Beispiel ist dieses. Wenn ich jQuery schreibe, schreibe ich oft so: this.attr("src","test.jpg"); aber es ist tatsächlich ein DOM-Objekt , und .attr( „src“, „test.jpg“) ist eine jQuery-Methode, daher ist ein Fehler aufgetreten. Um dieses Problem zu lösen, müssen Sie das DOM-Objekt in ein jQuery-Objekt konvertieren, z. B. $(this).attr("src","test.jpg");

1 Konvertieren Sie das DOM-Objekt in ein jQuery-Objekt

Für ein DOM-Objekt, das bereits ein DOM-Objekt ist, müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten, $(DOM-Objekt) Hinweis : var ist eine definierte Variable

Zum Beispiel:


var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

Nach der Konvertierung können Sie jQuery-Methoden nach Belieben verwenden.

2. Konvertieren eines jQuery-Objekts in ein DOM-Objekt

Zwei Konvertierungsmethoden beziehen sich auf die Konvertierung 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.

Zum Beispiel:


var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

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

Zum Beispiel:


var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

Mit den oben genannten Methoden können jQuery-Objekte und DOM-Objekte nach Belieben ineinander konvertiert werden Hervorzuheben ist noch einmal: DOM-Objekte Es können nur Methoden im DOM verwendet werden. jQuery-Objekte können keine Methoden im DOM verwenden.

Das obige ist der detaillierte Inhalt vonDetaillierter Beispielcode für die Konvertierung von JQuery-Objekten und DOM-Objekten ineinander. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn