Wie man jQuery in JavaScript einbindet / Ausführlicher Leitfaden

jQuery - dies ist eine der beliebtesten JavaScript-Bibliotheken, die die Arbeit mit HTML-Dokumenten erheblich vereinfacht. Es bietet eine benutzerfreundliche Oberfläche zum Bearbeiten von Elementen auf einer Webseite, zum Verarbeiten von Ereignissen, zum Erstellen von Animationen und mehr. Um jedoch alle Funktionen von jQuery nutzen zu können, müssen Sie sie ordnungsgemäß in JavaScript-Code einbinden.

Es gibt mehrere Möglichkeiten, jQuery zu verbinden. Eine der häufigsten ist das Anschließen einer Bibliothek von einem CDN (Content Delivery Network). In diesem Fall wird die Bibliotheksdatei von einem Remote-Server heruntergeladen, wodurch das Laden der Seite beschleunigt und der Datenverkehr des Benutzers eingespart wird. Fügen Sie dazu dem Abschnitt des HTML-Dokuments den folgenden Code hinzu:

Wenn Sie es vorziehen, jQuery lokal zu verbinden, müssen Sie zuerst die Bibliotheksdatei von der offiziellen Website herunterladen https://jquery.com. Legen Sie dann die Datei in das gewünschte Verzeichnis Ihres Projekts und fügen Sie den folgenden Code in den Abschnitt des HTML-Dokuments ein:

Nachdem Sie jQuery verbunden haben, können Sie alle seine Funktionen in Ihrem JavaScript-Code verwenden, z. B. Selektoren verwenden, um Elemente auf einer Seite auszuwählen, Klassen hinzuzufügen und zu entfernen, den Inhalt von Elementen zu ändern, Ereignisse zu verarbeiten und vieles mehr.

Verbinden von jQuery mit JavaScript - 6 Schritte

Schritt 1: Laden Sie die jQuery-Bibliothek von der offiziellen Website herunter oder verwenden Sie den CDN-Link.

Schritt 2: Erstellen Sie ein neues HTML-Dokument und fügen Sie einen Verweis auf die jQuery-Datei im Tag hinzu head mit einem Tag script.

Schritt 3: Fügen Sie Ihren eigenen JavaScript-Code in das Tag ein script vor dem schließenden Tag body oder in einer separaten JS-Datei.

Schritt 4: Schreiben Sie Ihren Code mit der jQuery-Syntax.

Schritt 5: Warten Sie, bis das HTML-Dokument vollständig mit der jQuery-Funktion geladen ist document.ready

Schritt 6: Überprüfen Sie, ob der Code ordnungsgemäß funktioniert und auf der Seite angezeigt wird.

Mit diesen 6 einfachen Schritten können Sie jQuery erfolgreich in Ihrem JavaScript-Code einbinden und verwenden.

Version auswählen und herunterladen

Sie können die folgenden Methoden verwenden, um jQuery zu laden:

Die Auswahl der Download-Methode hängt von Ihren Vorlieben und Anforderungen des Projekts ab. Wenn Sie den Download von einem Google-Server oder jQuery-Server auswählen, müssen Sie den folgenden Code in das Tag einfügen

Wenn Sie einen lokalen Download auswählen, müssen Sie die jQuery-Datei von der offiziellen Website herunterladen und in Ihr Projekt einfügen. Dann können Sie den folgenden Code vor dem schließenden Tag einfügen

Beachten Sie beim Laden von jQuery, dass der Browser den Code nach dem Laden der Bibliothek ausführt. Daher sollten Ihre Skripte, die jQuery verwenden, nach dem Laden der Bibliothek selbst platziert werden.

Erstellen einer HTML-Datei

Sie müssen die Erweiterung verwenden, um eine HTML-Datei zu erstellen.html. Erstellen Sie zunächst eine neue Datei in einem beliebigen Texteditor und speichern Sie sie mit der Erweiterung .html, zum Beispiel index.html.

Dann öffnen wir die erstellte Datei und fangen an, sie auszufüllen. Die HTML-Datei muss eine Struktur haben:

Innerhalb des Tags können wir Meta-Tags, Stile und Skripte angeben. Meta-Tags werden verwendet, um Informationen über ein Dokument festzulegen, z. B. die Codierung eines Dokuments:

Innerhalb des Tags geben wir den Titel des Dokuments an, das auf der Registerkarte des Browsers angezeigt wird:

Innerhalb des Tags platzieren wir den Inhalt der Seite - Text, Bilder, Formen usw.:

Dies ist meine erste HTML-Datei.

Am Ende der Datei schließen wir das Tag :

Führen Sie nun die erstellte Datei im Browser aus und Sie sehen eine Anzeige Ihrer HTML-Seite.