Heim Web-Frontend js-Tutorial Was ist der Unterschied zwischen jquery und document zum Abrufen von HTML-Elementen?

Was ist der Unterschied zwischen jquery und document zum Abrufen von HTML-Elementen?

Nov 20, 2020 pm 04:40 PM
document html元素 jquery

Unterschied: Das von jquery erhaltene HTML-Element ist ein jquery-Objekt und kann jquery-Methoden ausführen, während das Dokument ein dom-Objekt erhält und dom-Methoden ausführt. jQuery-Objekte sind einzigartig für jQuery und können keine DOM-Methoden verwenden; DOM-Objekte können keine jQuery-Methoden verwenden.

Was ist der Unterschied zwischen jquery und document zum Abrufen von HTML-Elementen?

Verwandte Empfehlungen: „jQuery Tutorial

Ich habe kürzlich ein Video-Plug-In über OCX erstellt und das Plug-In dann in HTML eingefügt (wenn Sie es wissen möchten, können Sie einen Blick darauf werfen).

Weil ich dieses Plug-In bedienen möchte, um es abzuspielen, anzuhalten usw., muss ich dieses Element wie erwartet abrufen, und dann kann es überhaupt nicht ausgeführt werden Dokument, um es zu bekommen, und es wird normal ausgeführt. Die Details sind wie folgt.

//正常执行     var obj = document.getElementById("player00");
obj.testhelloworld();//无法执行var playobj = $('#player00');
playobj.testhelloworld();
Nach dem Login kopieren

Dann denke ich: Was ist der Unterschied zwischen den beiden? Dann habe ich nach der folgenden Schlussfolgerung gesucht

Das von jquery erhaltene HTML-Element ist ein jquery-Objekt und kann jquery-Methoden ausführen, während das Dokument ein dom-Objekt erhält und dom-Methoden ausführt

Erklärung:

DOM-Objekt Es handelt sich um ein Objekt, das wir mit der herkömmlichen Methode (Javascript) erhalten, und das jQuery-Objekt ist das Objekt, das wir mit dem jQuery-Klassenbibliotheksselektor erhalten. Ein JQuery-Objekt ist ein Objekt, das durch Umschließen eines DOM-Objekts durch jQuery generiert wird. Das JQuery-Objekt ist einzigartig für jQuery, kann aber nicht die DOM-Methoden verwenden. Ich war plötzlich erleichtert, dass die beiden gleichwertig waren, und ich wollte herausfinden, warum dies nicht der Fall war Jetzt, wo ich darüber nachdenke, bin ich völlig erleichtert.

In diesem Fall

wie verwandeln sich die beiden dann ineinander?

Schließlich ist der Inhalt des erhaltenen Objekts derselbe.

JQuery-Objekt in DOM-Objekt konvertieren:

Zwei Konvertierungsmethoden konvertieren ein jQuery-Objekt in ein DOM-Objekt: [index] und .get(index);

(1) Das jQuery-Objekt ist ein Datenobjekt, das kann Übergeben Sie die Methode [index], um das entsprechende DOM-Objekt abzurufen.

Zum Beispiel:

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

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

Zum Beispiel:

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

DOM-Objekt wird in ein jQuery-Objekt konvertiert:

Für bereits ein DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten. $(DOM-Objekt)

Beispiel:

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

Nach der Konvertierung können Sie jede beliebige jQuery-Methode verwenden.

Mit den oben genannten Methoden können jQuery-Objekte und DOM-Objekte nach Belieben ineinander konvertiert werden. Es muss noch einmal betont werden, dass nur DOM-Objekte Methoden im DOM verwenden können und jQuery-Objekte keine Methoden im DOM verwenden können.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Programmierkurse

! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen jquery und document zum Abrufen von HTML-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Führen Sie die PHP-Funktion mit onclick aus Führen Sie die PHP-Funktion mit onclick aus Feb 29, 2024 pm 04:31 PM

Wir werden auch eine andere Möglichkeit zum Ausführen einer PHP-Funktion über das Ereignis onclick() mithilfe der Jquery-Bibliothek behandeln. Diese Methode ruft eine Javascript-Funktion auf, die den Inhalt der PHP-Funktion auf der Webseite ausgibt. Wir werden auch eine andere Möglichkeit demonstrieren, eine PHP-Funktion mithilfe des onclick()-Ereignisses auszuführen, indem wir die PHP-Funktion mit reinem JavaScript aufrufen. In diesem Artikel wird eine Möglichkeit vorgestellt, eine PHP-Funktion auszuführen, die GET-Methode zum Senden der Daten in der URL zu verwenden und die isset()-Funktion zum Überprüfen der GET-Daten zu verwenden. Diese Methode ruft eine PHP-Funktion auf, wenn die Daten festgelegt sind und die Funktion ausgeführt wird. Mit jQuery können wir eine PHP-Funktion über das Ereignis onclick() ausführen

So lesen Sie Excel-Daten in HTML So lesen Sie Excel-Daten in HTML Mar 27, 2024 pm 05:11 PM

So lesen Sie Excel-Daten in HTML: 1. Verwenden Sie die JavaScript-Bibliothek, um Excel-Daten zu lesen. 2. Verwenden Sie die serverseitige Programmiersprache, um Excel-Daten zu lesen.

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: &lt

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:

Was ist ein Dreamweaver-Zeilenumbruch? Was ist ein Dreamweaver-Zeilenumbruch? Apr 08, 2024 pm 09:54 PM

Verwenden Sie das <br>-Tag in Dreamweaver, um Zeilenumbrüche zu erstellen, die über das Menü, Tastenkombinationen oder direkte Eingabe eingefügt werden können. Kann mit CSS-Stilen kombiniert werden, um leere Zeilen mit bestimmten Höhen zu erstellen. In manchen Fällen ist es sinnvoller, das <p>-Tag anstelle des <br>-Tags zu verwenden, da es automatisch Leerzeilen zwischen Absätzen erstellt und Stilkontrolle anwendet.

Das GTA 6-Dokument gibt einen detaillierten Überblick über alle Lecks Das GTA 6-Dokument gibt einen detaillierten Überblick über alle Lecks Sep 08, 2024 am 06:37 AM

Am 3. September erschien Version 1.5 des Grand Theft Auto VI-Dokuments, das einen detaillierten Überblick über alles bietet, was bisher über das Spiel bekannt ist. Die aktualisierte Version des Dokuments wurde in einem auf X (ehemals Twitter) veröffentlichten Trailer angekündigt.??

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Feb 29, 2024 am 09:03 AM

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wenn Sie jQuery zum Betreiben von DOM-Elementen verwenden, stoßen Sie häufig auf Situationen, in denen Sie feststellen müssen, ob ein Element ein bestimmtes Attribut hat. In diesem Fall können wir diese Funktion einfach mit Hilfe der von jQuery bereitgestellten Methoden implementieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt, um festzustellen, ob ein jQuery-Element über bestimmte Attribute verfügt, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die Methode attr() und den Operator typeof //, um zu bestimmen, ob das Element ein bestimmtes Attribut hat

Einführung in das Hinzufügen neuer Zeilen zu einer Tabelle mit jQuery Einführung in das Hinzufügen neuer Zeilen zu einer Tabelle mit jQuery Feb 29, 2024 am 08:12 AM

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Webentwicklung verwendet wird. Während der Webentwicklung ist es häufig erforderlich, mithilfe von JavaScript dynamisch neue Zeilen zu Tabellen hinzuzufügen. In diesem Artikel wird erläutert, wie Sie mit jQuery neue Zeilen zu einer Tabelle hinzufügen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die HTML-Seite einführen. Die jQuery-Bibliothek kann über den folgenden Code in das Tag eingeführt werden:

See all articles