Einleitung
HTML -, CSS-und JavaScript sind die drei grundlegenden Sprachen des web. Wir strukturieren unsere Websites mit HTML, gestalten sie mit CSS und fügen interaktive Funktionen mit JavaScript hinzu. Tatsächlich werden die meisten Animationen und alle Aktionen, die als Ergebnis eines Klicks, Schwebens oder Scrollens eines Benutzers ausgeführt werden, mit JavaScript erstellt.
jQuery ist die JavaScript-Bibliothek „Weniger schreiben, mehr tun“. Es ist keine Programmiersprache, sondern ein Tool, mit dem das Schreiben gängiger JavaScript-Aufgaben übersichtlicher wird., jQuery hat den zusätzlichen Vorteil, dass es browserübergreifend kompatibel ist, was bedeutet, dass Sie sicher sein können, dass die Ausgabe Ihres Codes in jedem modernen Browser wie beabsichtigt gerendert wird.
Durch den Vergleich eines einfachen “ Hallo, Welt!“programm in JavaScript und jQuery, können wir den Unterschied sehen, wie sie beide geschrieben sind.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Dieses kurze Beispiel zeigt, wie jQuery auf prägnante Weise das gleiche Endergebnis wie einfaches JavaScript erzielen kann.,
Ziele
Dieses Handbuch setzt keine Vorkenntnisse von jQuery voraus und behandelt die folgenden Themen:
- So installieren Sie jQuery in einem Webprojekt.
- Die Definitionen wichtiger Webentwicklungskonzepte wie API, DOM und CDN.
- Gemeinsame jQuery-Selektoren, Ereignisse und Effekte.
- Beispiele zum Testen der im gesamten Artikel gelernten Konzepte.
Voraussetzungen
Bevor Sie mit dieser Anleitung beginnen, benötigen Sie Folgendes:
- Grundkenntnisse in HTML und CSS., Sie sollten bereits wissen, wie Sie eine einfache Website einrichten und CSS-Selektoren wie IDs, Klassen und Pseudoelemente verstehen.
- Ein Verständnis der Grundlagen der Programmierung. Während es möglich ist, jQuery ohne fortgeschrittene JavaScript-Kenntnisse zu schreiben, hilft die Vertrautheit mit den Konzepten von Variablen und Datentypen sowie Mathematik und Logik erheblich.
Einrichten von jQuery
jQuery ist eine JavaScript-Datei, auf die Sie in Ihrem HTML-Code verlinken. Es gibt zwei Möglichkeiten, jQuery in ein Projekt aufzunehmen:
- Laden Sie eine lokale Kopie herunter.,
- Link zu einer Datei über Content Delivery Network (CDN).
Hinweis: Ein Content Delivery Network (CDN) ist ein System aus mehreren Servern, die Webinhalte basierend auf dem geografischen Standort an einen Benutzer liefern. Wenn Sie über CDN eine Verknüpfung zu einer gehosteten jQuery-Datei herstellen, wird diese möglicherweise schneller und effizienter für den Benutzer bereitgestellt, als wenn Sie sie auf Ihrem eigenen Server gehostet hätten.
Wir verwenden das CDN, um in unseren Beispielen auf jQuery zu verweisen. Sie finden die neueste Version von jQuery in den gehosteten Bibliotheken von Google., Wenn Sie es stattdessen herunterladen möchten, können Sie eine Kopie von jQuery von der offiziellen Website erhalten.
Wir beginnen diese Übung mit der Erstellung eines kleinen Webprojekts. Es besteht aus style.css im Verzeichnis css/, scripts.js im Verzeichnis js/ und einem Hauptverzeichnis index.html im Stammverzeichnis des Projekts.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlErstellen Sie zunächst ein HTML-Skelett und speichern Sie es als index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link zum jQuery CDN direkt vor dem Schließen </body> Tag, gefolgt von Ihrer eigenen benutzerdefinierten JavaScript-Datei, scripts.js.
Ihre JavaScript-Datei (scripts.js) muss unter der jQuery-Bibliothek im Dokument enthalten sein, sonst funktioniert sie nicht.
Hinweis: Wenn Sie eine lokale Kopie von jQuery heruntergeladen haben, speichern Sie sie in Ihrem Ordner js/ und verknüpfen Sie sie unter js/jquery.min.js.,
Zu diesem Zeitpunkt wird die jQuery-Bibliothek jetzt in Ihre Site geladen und Sie haben vollen Zugriff auf die jQuery-API.
Hinweis: Eine Application Programming Interface (API) ist eine Schnittstelle, über die Softwareprogramme miteinander interagieren können. In diesem Fall enthält die API für jQuery alle Informationen und Dokumentationen, die für den Zugriff auf jQuery erforderlich sind.
Mit jQuery
Im Kern wird jQuery verwendet, um HTML-Elemente im Browser über das DOM zu verbinden.,
Das Document Object Model (DOM) ist die Methode, mit der JavaScript (und jQuery) mit dem HTML in einem Browser interagieren. Um genau anzuzeigen, was das DOM ist, klicken Sie in Ihrem Webbrowser mit der rechten Maustaste auf die aktuelle Webseite und wählen Sie Inspect. Dies öffnet Entwicklertools. Der HTML-Code, den Sie hier sehen, ist das DOM.
Jedes HTML-Element wird als Knoten im DOM betrachtet – ein Objekt, das JavaScript berühren kann. Diese Objekte sind in einer Baumstruktur angeordnet, wobei <html> näher am Stamm ist und jedes verschachtelte Element ein Zweig weiter entlang des Baumes ist., JavaScript kann diese Elemente hinzufügen, entfernen und ändern.
Wenn Sie erneut mit der rechten Maustaste auf die Site klicken und auf Seitenquelle anzeigen klicken, wird die rohe HTML-Ausgabe der Website angezeigt. Es ist zunächst einfach, das DOM mit der HTML-Quelle zu verwechseln, aber sie sind unterschiedlich – die Seitenquelle ist genau das, was in der HTML-Datei geschrieben ist. Es ist statisch und ändert sich nicht und wird nicht von JavaScript beeinflusst. Der DOM ist dynamisch und kann sich ändern.
Die äußerste Ebene des DOMS, die Ebene, die den gesamten <html> Knoten umschließt, ist das Dokumentobjekt., Um die Seite mit jQuery zu bearbeiten, müssen wir zuerst sicherstellen, dass das Dokument „fertig“ ist.
Erstellen Sie die Datei scripts.js im js/ Verzeichnis, und geben Sie den folgenden code ein:
$(document).ready(function() { // all custom jQuery will go here});Der gesamte jQuery-Code, den Sie schreiben, wird in den obigen Code eingeschlossen. jQuery erkennt diesen Bereitschaftszustand, sodass der in dieser Funktion enthaltene Code nur ausgeführt wird, sobald das DOM für die Ausführung von JavaScript-Code bereit ist., Auch wenn JavaScript in einigen Fällen erst geladen wird, wenn Elemente gerendert werden, wird die Verwendung dieses Blocks als Best Practice angesehen.
In der Einführung dieses Artikels haben Sie ein einfaches “ Hallo, Welt!” Skript. Um dieses Skript zu initiieren und Text mit jQuery in den Browser zu drucken, erstellen wir zuerst ein leeres Absatzelement auf Blockebene mit der ID demo.
...<body><p></p>...jQuery wird mit dem Dollarzeichen aufgerufen und dargestellt ($)., Wir greifen mit jQuery hauptsächlich mit CSS-Syntax auf das DOM zu und wenden eine Aktion mit einer Methode an. Ein grundlegendes jQuery-Beispiel folgt diesem Format.
$("selector").method();Da eine ID in CSS durch ein Hash-Symbol (#) dargestellt wird, greifen wir mit dem Selektor #demoauf die Demo-ID zu. html() ist eine Methode, die den HTML-Code innerhalb eines Elements ändert.
Wir werden jetzt unsere benutzerdefinierte setzen “ Hallo, Welt!“Programm innerhalb der jQuery ready() wrapper., Fügen Sie diese Zeile zu Ihrerscripts.js – Datei in der vorhandenen Funktion hinzu:
$(document).ready(function() { $("#demo").html("Hello, World!");});Sobald Sie die Datei gespeichert haben, können Sie Ihre index.html Datei in Ihrem Browser öffnen. Wenn alles richtig funktioniert hat, sehen Sie die Ausgabe Hello, World!.
Selektoren
Selektoren sagen jQuery, an welchen Elementen wir arbeiten möchten. Die meisten jQuery-Selektoren sind die gleichen wie das, was Sie in CSS kennen, mit ein paar jQuery-spezifischen Ergänzungen., Sie können die vollständige Liste der jQuery-Selektoren auf ihren offiziellen Dokumentationsseiten anzeigen.
Um auf einen Selektor zuzugreifen, verwenden Sie das jQuery-Symbol $, gefolgt von Klammern ().
$("selector")Zeichenketten mit doppelten Anführungszeichen werden vom jQuery style Guide bevorzugt, obwohl häufig auch Zeichenfolgen mit einfachen Anführungszeichen verwendet werden.
Nachfolgend finden Sie einen kurzen Überblick über einige der am häufigsten verwendeten Selektoren.,
Im Allgemeinen sind Klassen und IDs das, worauf Sie am meisten stoßen — Klassen, wenn Sie mehrere Elemente auswählen möchten, und IDs, wenn Sie nur eines auswählen möchten.
jQuery Ereignisse
In der „Hallo, Welt!“Beispiel: Der Code wurde ausgeführt, sobald die Seite geladen und das Dokument fertig war, und erforderte daher keine Benutzerinteraktion. In diesem Fall hätten wir den Text direkt in den HTML-Code schreiben können, ohne uns um jQuery zu kümmern. Wir müssen jedoch jQuery verwenden, wenn Text mit einem Klick auf eine Schaltfläche auf der Seite angezeigt werden soll.,
Kehren Sie zu Ihrerindex.html – Datei zurück und fügen Sie ein<button> – Element hinzu. Wir werden diese Schaltfläche verwenden, um unser Klickereignis abzuhören.
...<body><button>Click me</button><p></p>Wir verwenden die – Methode, um eine Funktion aufzurufen, die unser “ Hallo, Welt!” Codes.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Hier ist der endgültige code.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Speichern Sie die scripts.js Datei und aktualisieren Sie index.html im Browser., Jetzt, wenn Sie auf die Schaltfläche klicken, die “ Hallo, Welt!“der text erscheinen wird.
Ein Ereignis ist jedes Mal, wenn der Benutzer mit dem Browser interagiert. Normalerweise geschieht dies mit der Maus oder Tastatur. Das soeben erstellte Beispiel verwendete ein Klickereignis. In der offiziellen jQuery-Dokumentation können Sie eine vollständige Liste der jQuery-Ereignismethoden anzeigen. Nachfolgend finden Sie eine kurze Übersicht über einige der am häufigsten verwendeten Ereignismethoden.
Um Bilder animieren oder ausblenden zu lassen, wenn ein Benutzer den Bildschirm nach unten scrollt, verwenden Sie diescroll() – Methode., Um ein Menü mit der Taste ESC zu verlassen, verwenden Sie die Methode keydown(). Um ein Dropdown-Akkordeon-Menü zu erstellen, verwenden Sie die Methode click().
Das Verständnis von Ereignissen ist für die Erstellung dynamischer Website-Inhalte mit jQuery unerlässlich.
jQuery-Effekte
jQuery-Effekte arbeiten Hand in Hand mit Ereignissen, indem Sie Animationen hinzufügen und Elemente auf der Seite anderweitig bearbeiten können.
Wir werden ein Beispiel machen, wo wir ein Popup-Overlay öffnen und schließen., Während wir zwei IDs verwenden können – eine zum Öffnen des Overlays und eine zum Schließen -, verwenden wir stattdessen eine Klasse zum Öffnen und Schließen des Overlays mit derselben Funktion.
Löschen Sie die aktuellen<button>und – Tags aus dem Hauptteil Ihrerindex.html – Datei und fügen Sie Ihrem HTML-Dokument Folgendes hinzu:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...In unserer style.css – Datei verwenden wir eine minimale Menge CSS, um die overlay mit display: none auszublenden und auf dem Bildschirm zu zentrieren.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}Zurück in der scripts.js – Datei verwenden wir die toggle() – Methode, mit der die CSS display – Eigenschaft zwischen none und block, Ausblenden und Anzeigen der Überlagerung beim Klicken.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Aktualisieren index.html. Sie können nun die Sichtbarkeit des Modals durch Klicken auf die Schaltflächen umschalten., Sie können toggle() in fadeToggle() oder slideToggle() ändern, um einige andere integrierte jQuery-Effekte anzuzeigen.
Nachfolgend finden Sie einen kurzen Überblick über einige der am häufigsten verwendeten Effektmethoden.
-
toggle()– Toggle: schaltet die Sichtbarkeit eines Elements oder der Elemente.show()undhide()sind die zugehörigen Einwegeffekte. -
fadeToggle()– Fade-Toggle: schaltet die Sichtbarkeit und animiert die Deckkraft eines Elements oder der Elemente.,fadeIn()undfadeOut()sind die zugehörigen Einwegeffekte. -
slideToggle()– Slide Toggle schaltet die Sichtbarkeit eines Elements oder von Elementen mit Gleiteffekt um.slideDown()undslideUp()sind die zugehörigen Einwegeffekte. -
animate()– Animate führt benutzerdefinierte Animationseffekte für die CSS-Eigenschaft eines Elements aus.,
Wir verwenden jQuery-Ereignisse, um auf eine Benutzerinteraktion wie das Klicken einer Schaltfläche zu warten, und verwenden jQuery-Effekte, um Elemente weiter zu bearbeiten, sobald diese Aktion ausgeführt wird.
Fazit
In diesem Handbuch haben wir gelernt, wie man Elemente mit jQuery auswählt und manipuliert und wie Ereignisse und Effekte zusammenarbeiten, um ein interaktives Weberlebnis für den Benutzer zu schaffen.
Von hier aus sollten Sie ein tieferes Verständnis der Funktionen von jQuery haben und auf dem Weg sein, Ihren eigenen Code zu schreiben.