jQuery ist eine der beliebtesten Bibliotheken für JavaScript, die das Schreiben von Code vereinfacht und seinen Umfang reduziert. Es bietet viele vorgefertigte Funktionen und Methoden, die die Arbeit mit Elementen einer Webseite erheblich vereinfachen.
Um mit der Verwendung von jQuery zu beginnen, müssen Sie eine bestimmte Bibliothek mit Ihrem Projekt verbinden. In diesem Artikel werden wir uns eine schrittweise Anleitung ansehen, die Ihnen hilft, dieses Verfahren schnell zu erlernen, selbst wenn Sie ein Anfänger sind.
Schritt 1: Herunterladen von jQuery
Im ersten Schritt müssen Sie die jQuery-Bibliothek selbst von der offiziellen Website herunterladen. Besuchen Sie die Seite jquery.com und klicken Sie auf die Schaltfläche "Download the compressed, production jQuery 3.6.0", um die neueste stabile Version herunterzuladen.
Schritte zum Verbinden von jquery für Anfänger
Wenn Sie jQuery an Ihre Website anschließen, können Sie die JavaScript-Funktionen erheblich erweitern und die Interaktion mit HTML-Elementen vereinfachen. Hier ist eine Schritt-für-Schritt-Anleitung, die Ihnen hilft, jQuery mit Ihrer Website zu verbinden:
- Laden Sie jquery von der offiziellen Website herunter. Gehe zur offiziellen jQuery-Website (https://jquery.com /) und suchen Sie den Abschnitt "Download". Klicken Sie auf den Link "Download the uncompressed, development jQuery 3.5.1".
- Speichern Sie die jQuery-Datei.min.js. Öffnen Sie nach dem Herunterladen das heruntergeladene Archiv und kopieren Sie die jquery-Datei.min.js in den Ordner Ihres Projekts.
- Erstellen Sie einen Verweis auf jQuery in der HTML-Datei. Öffnen Sie die HTML-Datei Ihres Projekts und verwenden Sie das Tag, um einen Verweis auf die jquery-Datei zu erstellen.min.js. Fügen Sie das Attribut "src" hinzu und geben Sie den Pfad zur jQuery-Datei an.min.js auf Ihrer Website.
Jetzt muss jQuery erfolgreich auf Ihrer Website eingebunden werden! Sie können seine Funktionen und Methoden verwenden, um besser mit Elementen Ihrer Website zu interagieren.
Schritt 1: Laden Sie jQuery von der offiziellen Website herunter
Auf der Hauptseite finden Sie einen Link zum Herunterladen der neuesten Version von jQuery. Klicken Sie darauf, um den Download zu starten.
Sobald der Download abgeschlossen ist, haben Sie eine Datei mit der Erweiterung .js, das eine komprimierte Version von jQuery ist.
Als nächstes können Sie auswählen, ob es empfohlen wird, die Datei lokal zu speichern oder das CDN (Content Delivery Network) zum Laden von jQuery zu verwenden. Wenn Sie die Datei lokal speichern möchten, speichern Sie sie an einem für Sie geeigneten Ort auf Ihrem Computer.
Jetzt sind Sie bereit, mit dem nächsten Schritt fortzufahren, um jQuery mit Ihrem Projekt zu verbinden.
Schritt 2: Verbinden Sie jQuery mit Ihrem Projekt
Um jQuery in Ihrem Projekt zu verwenden, müssen Sie es einbinden. Es gibt mehrere Möglichkeiten, dies zu tun:
Methode 1: Laden Sie jQuery mit CDN herunter
Das CDN (Content Delivery Network) bietet die Möglichkeit, die jQuery-Bibliothek von einem Remote-Server zu laden. Dies ist normalerweise der einfachste Weg, jQuery mit Ihrem Projekt zu verbinden. Sie müssen nur den folgenden Code zum Abschnitt Ihrer HTML-Seite hinzufügen:
Dieser Code lädt die neueste Version von jQuery von der offiziellen Website herunter.
Methode 2: Laden Sie jQuery auf Ihren Computer herunter
Wenn Sie lieber kein CDN verwenden möchten, können Sie die jQuery-Bibliothek von der offiziellen Website herunterladen https://jquery.com /. Dann müssen Sie die jQuery-Datei auf Ihren Computer herunterladen und dem Projekt hinzufügen. Danach können Sie die jQuery-Datei wie folgt in Ihre HTML-Seite einbinden:
Methode 3: Verwenden Sie eine lokale Kopie von jQuery
Wenn Sie jQuery bereits in Ihrem Projekt verwendet haben und eine lokale Kopie der Bibliothek haben, können Sie damit jQuery mit Ihrer HTML-Seite verbinden. Fügen Sie einfach den folgenden Code zu einem Abschnitt Ihres HTML-Dokuments hinzu:
Stellen Sie sicher, dass der richtige Pfad zur jQuery-Datei auf Ihrem Computer angegeben ist.
Nachdem Sie jQuery nun mit Ihrem Projekt verbunden haben, können Sie damit beginnen, seine Funktionalität in Ihrem JavaScript-Code zu verwenden.
Schritt 3: Verbinden Sie jQuery über CDN
Jetzt, da wir das npm-Paket installiert und die jquery-Datei heruntergeladen haben, sind wir bereit, es mit unserem Projekt zu verbinden. In diesem Schritt betrachten wir die Möglichkeit, jQuery über das Content Delivery Network (CDN) zu verbinden.
Ein CDN ist ein Netzwerk von Servern, die auf der ganzen Welt verteilt sind und Kopien beliebter Bibliotheken und Dateien enthalten. Wenn Sie eine Datei über ein CDN einbinden, verwenden Sie eine Kopie dieser Datei, die sich auf dem Server befindet, der Ihrem Benutzer am nächsten ist. Dadurch können Sie das Hochladen von Dateien beschleunigen und Ressourcen auf Ihrem Server sparen.
Um jquery über ein CDN zu verbinden, fügen Sie dem Abschnitt Ihres HTML-Dokuments den folgenden Code hinzu:
Dieser Code fügt ein Tag mit dem src-Attribut hinzu, das auf die URL der jQuery-Datei auf dem CDN-Server verweist. Wenn der Browser auf dieses Tag trifft, lädt er die Datei von der angegebenen URL herunter und führt ihren Inhalt aus.
Jetzt haben Sie jquery erfolgreich mit einem CDN mit Ihrem Projekt verbunden. Im nächsten Schritt werden wir uns ansehen, wie Sie jquery in Ihrem Code verwenden.
Schritt 4: Initialisieren Sie jQuery in Ihrem Code
Nachdem Sie jQuery erfolgreich mit Ihrem Projekt verbunden haben, müssen Sie es in Ihrem Code initialisieren. Dies ermöglicht die Verwendung aller Funktionen und Methoden der jQuery-Bibliothek.
Es gibt mehrere Möglichkeiten, jQuery zu initialisieren:
1) Verwenden Sie die vordefinierte Funktion zum Initialisieren:
$(document).ready(function());Die Funktion $(document).ready() bedeutet, dass der Code innerhalb der Funktion nur ausgeführt wird, wenn das HTML-Dokument vollständig geladen ist. Dadurch wird sichergestellt, dass alle DOM-Elemente auf Ihrer Seite für die Manipulation in Ihrem jQuery-Code verfügbar sind.
2) Verwenden Sie einen abgekürzten Datensatz:
$(function());Dies ist eine alternative Möglichkeit, jQuery mit der Funktion $(document) zu initialisieren.ready() . Beide Methoden sind gleichwertig und werden ausgeführt, nachdem das HTML-Dokument vollständig geladen wurde.
Nach der Initialisierung von jQuery können Sie damit Elemente Ihrer Webseite manipulieren, Animationen erstellen, Ereignisse verarbeiten und viele andere Aufgaben ausführen. Sie können jQuery-Selektoren verwenden, um DOM-Elemente auszuwählen und verschiedene Aktionen und Methoden auf sie anzuwenden.
Beispiel für die Verwendung von jQuery nach der Initialisierung:
$(document).ready(function());>);In diesem Beispiel verwenden wir den Selektor $("p"), um alle Elemente auszuwählen
auf der Seite und wenden Sie die text() -Methode an, um den Text innerhalb all dieser Elemente zu ändern. Wir verwenden auch den Selektor $("#myElement"), um ein Element mit der ID "myElement" auszuwählen, und wenden die addClass() -Methode an, um die CSS-Klasse "highlight" hinzuzufügen. Schließlich behandeln wir das Klickereignis auf einer Schaltfläche mit der click() -Methode und zeigen die Nachricht mit der Funktion alert() an.
Jetzt, nachdem jQuery erfolgreich initialisiert wurde, können Sie damit dynamische und interaktive Webseiten mit leistungsstarken Bibliotheksfunktionen und -methoden erstellen.
Schritt 5: Überprüfen Sie die Funktionsweise von jQuery auf Ihrer Website
Nachdem Sie jQuery nun erfolgreich mit Ihrer Website verbunden haben, ist es an der Zeit, die Funktionsfähigkeit Ihrer Website zu überprüfen. Im Folgenden finden Sie eine einfache Anleitung, mit der Sie diesen Schritt ausführen können:
- Öffnen Sie die HTML-Datei Ihrer Website in einem beliebigen Texteditor oder einer IDE.
- Erstellen Sie innerhalb des Blocks eine neue Funktion namens testJQuery .
- Fügen Sie in der testJQuery-Funktion den folgenden Code hinzu:
| Kode | Funktionalität |
|---|---|
| $(document).ready(function() | Teilt dem Browser mit, dass der Code erst ausgeführt werden soll, nachdem das Dokument vollständig geladen wurde. |
| // Code, der jQuery verwendet | In diesem Teil können Sie beliebigen Code schreiben, der die jQuery-Funktionalität verwendet. |
| >); | Schließt die Funktion $(document).ready . |
4. Speichern Sie die HTML-Datei und öffnen Sie sie in einem Webbrowser.
5. Öffnen Sie die Webbrowser-Entwicklertools (dies kann normalerweise durch Drücken von F12 erfolgen ).
6. Klicken Sie in den Entwicklertools auf die Registerkarte "Konsole".
7. Wenn Ihr jQuery-Code korrekt angeschlossen ist, sollte es keine Fehler in der Konsole geben und Sie können die Ergebnisse der Ausführung Ihres Codes sehen.
Glückwunsch! Sie haben gerade die Arbeit von jQuery auf Ihrer Website überprüft!
