8.1 jQuery verbinden
Schließlich kamen wir zur jQuery-Bibliothek. Als dieser Artikel geschrieben wurde, war er bereits veraltet und wird in neuen Projekten fast nie verwendet . Aber einst war es sehr beliebt, sehr gut dokumentiert und es gibt im Internet viele Beispiele für seine Verwendung .
Wenn Sie also ein kleines Webprojekt schreiben und nicht monatelang mit dem Erlernen moderner Frameworks verbringen möchten, empfehle ich Ihnen die Verwendung der jQuery-Bibliothek.
Um die Tausenden von jQuery-Funktionen nutzen zu können, müssen Sie sie nur in Ihre Seite einbinden. Sie können es so machen:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
Die Arbeit mit jQuery kann in zwei Arten unterteilt werden.
Zunächst können Sie ein jQuery-Bibliotheksobjekt abrufen, bei dem es sich um ein reguläres HTML-Element handelt, das in ein benutzerdefiniertes jQuery-Objekt eingeschlossen ist.
Zweitens verfügt jQuery über mehrere globale Objekte, die nicht an HTML-Elemente gebunden sind. Sie müssen auch genutzt werden.
Beginnen wir mit dem ersten.
8.2 Arbeiten mit Selektoren
jQuery verwendet Selektoren, um mit Objekten zu arbeiten (erinnern Sie sich an CSS und seine Klassen?). Wenn Sie also in jQuery ein Objekt oder eine Gruppe von Objekten auswählen möchten, müssen Sie deren Auswahl festlegen.
Beispiele:
| Code | Beschreibung | Notiz | |
|---|---|---|---|
| 1 | $("div") | Wählt alle Objekte mit einem DIV-Tag aus | viele Objekte |
| 2 | $("img.#image123") | Wählt alle Objekte mit IMG-Tag und ID == image123 aus | ein Objekt |
| 3 | $("#image123") | Wählt alle Objekte mit der ID == image123 aus | ein Objekt |
| 4 | $("div.article") | Wählt alle Objekte mit einem DIV-Tag aus, die über einen Klassenartikel verfügen | viele Objekte |
Nehmen wir an, wir möchten allen Links eine Ereignisbehandlung hinzufügen onclick. So können wir das mit jQuery machen:
$("a").click(function() { alert("Click"); });
Dabei werden drei Schritte unternommen:
- Ruft die Objekte ab, die dem Selektor entsprechen
"a". - Wir erstellen eine anonyme Funktion, die die aufruft
alert(). - Wir legen diese Funktion als Event-Handler
clickfür alle Objekte ab Punkt 1 fest.
Ein weiterer Vorteil von jQuery ist, dass der Code leicht zu lesen ist. Es braucht nicht viel, um herauszufinden, wie alles funktioniert. Wenn es funktionierenden Code gibt, ist es leicht zu verstehen, was er tut.
8.3 Arbeiten mit Dokumentelementen
Sehen wir uns einige Szenarien für die Arbeit mit einem Dokument mithilfe von jQuery an.
Ermitteln Sie den Wert eines Elements (für Elemente, die Werte haben):
var result = $ ("selector").value();Elementwert festlegen (für Elemente, die Werte haben):
$ ("selector").value(newValue);Wie füge ich HTML in ein Element ein?
$ ("selector").html(newHTML);Und wie erhält man den HTML-Code, der sich im Element befindet?
var html = $ ("selector").html();Was ist, wenn ich nicht HTML, sondern einfachen Text erhalten/hinzufügen möchte? Auch hier gibt es keine Überraschungen.
var html = $ ("selector").text();Was ist, wenn ich die Farbe eines Elements erhalten/ändern möchte?
$ ("selector").color("red");Wenn Sie mit Stilen arbeiten müssen, ist dies ebenfalls einfach:
$ ("selector").css("color", "red");Wie füge ich ein neues Element hinzu?
$ (".container").append($("h3"));
GO TO FULL VERSION