JavaScript - Testen von jQuery


Testen von JavaScript-Framework-Bibliotheken - jQuery


Referenzieren von jQuery

Um eine JavaScript-Bibliothek zu testen, müssen Sie sie in einer Webseite referenzieren.

Um eine Bibliothek zu referenzieren, verwenden Sie das <script>-Tag, dessen src-Attribut auf die URL der Bibliothek gesetzt ist:

Referenzieren von jQuery

<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"> </script> </head> <body> </body> </html>


jQuery-Beschreibung

Die Hauptfunktion von jQuery ist die Funktion $() (die jQuery-Funktion). Wenn Sie dieser Funktion ein DOM-Objekt übergeben, gibt sie ein jQuery-Objekt zurück, dem jQuery-Funktionalität hinzugefügt wurde.

jQuery ermöglicht es Ihnen, Elemente über CSS-Selektoren auszuwählen.

In JavaScript können Sie eine Funktion zuweisen, um das window-load-Ereignis zu behandeln:

JavaScript-Weg:

function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction;

Die äquivalente jQuery-Variante ist anders:

jQuery-Weg:

function myFunction() { $("#h01").html("Hello jQuery"); } $(document).ready(myFunction);

In der letzten Zeile des obigen Codes wird das HTML-DOM-Dokumentobjekt an jQuery übergeben: $(document).

Wenn Sie ein DOM-Objekt an jQuery übergeben, gibt jQuery ein jQuery-Objekt zurück, das das HTML-DOM-Objekt umschließt.

Die jQuery-Funktion gibt ein neues jQuery-Objekt zurück, in dem ready() eine Methode ist.

Da Funktionen in JavaScript Variablen sind, können Sie myFunction als Variable an die ready-Methode von jQuery übergeben.

lamp jQuery gibt ein jQuery-Objekt zurück, das sich von dem übergebenen DOM-Objekt unterscheidet.
Die Eigenschaften und Methoden, die jQuery-Objekte haben, unterscheiden sich von denen von DOM-Objekten.
Sie können HTML-DOM-Eigenschaften und -Methoden nicht auf jQuery-Objekten verwenden.


jQuery testen

Bitte versuchen Sie das folgende Beispiel:

Beispiele

<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"> </script> <script> function myFunction() { $("#h01").html("Hello jQuery") } $(document).ready(myFunction); </script> </head> <body> <h1 id="h01"></h1> </body> </html>

Selbst ausprobieren »

Bitte versuchen Sie auch dieses Beispiel:

Beispiele

<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"> </script> <script> function myFunction() { $("#h01").attr("style","color:red").html("Hello jQuery") } $(document).ready(myFunction); </script> </head> <body> <h1 id="h01"></h1> </body> </html>

Selbst ausprobieren »

Wie Sie in den obigen Beispielen sehen können, ermöglicht jQuery Verkettung (Chain-Syntax).

Verkettung ist eine praktische Möglichkeit, mehrere Aufgaben auf demselben Objekt auszuführen.

Möchten Sie mehr erfahren? Beispiel-Tutorial bietet Ihnen ein großartiges jQuery-Tutorial.

Andere Erweiterungen