TOC

Eine Einführung in jQuery

Einführung

HTML, CSS und JavaScript sind die drei Hauptsprachen des Webs. 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 durch Klicken, Bewegen oder Scrollen eines Benutzers ausgeführt werden, mit JavaScript erstellt.

jQuery ist die JavaScript-Bibliothek "Weniger schreiben, mehr tun". Es handelt sich nicht um eine Programmiersprache, sondern um ein Tool, mit dem das Schreiben gängiger JavaScript-Aufgaben übersichtlicher wird. jQuery hat den zusätzlichen Vorteil, dass es mit https://jquery.com/browser-support/[cross-browser kompatibel ist. Sie können also sicher sein, dass die Ausgabe Ihres Codes in jedem modernen Browser wie vorgesehen wiedergegeben wird.

Durch den Vergleich eines einfachen "Hello, World!" - Programms in JavaScript und jQuery können wir den Unterschied zwischen den beiden Programmen erkennen.

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

jQuery

$("#demo").html("Hello, World!");

Dieses kurze Beispiel zeigt, wie jQuery auf prägnante Weise dasselbe Endergebnis wie einfaches JavaScript erzielen kann.

Tore

Dieses Handbuch setzt keine Vorkenntnisse in jQuery voraus und behandelt die folgenden Themen:

  • So installieren Sie jQuery in einem Webprojekt.

  • Die Definitionen wichtiger Webentwicklungskonzepte wie API, DOM und CDN.

  • Allgemeine jQuery-Selektoren, -Ereignisse und -Effekte.

  • Beispiele zum Testen der im Artikel erlernten Konzepte.

Voraussetzungen

Bevor Sie mit diesem Handbuch beginnen, benötigen Sie Folgendes:

  • Grundkenntnisse in HTML und CSS. Sie sollten bereits wissen, wie eine einfache Website eingerichtet wird, und CSS-Selektoren wie IDs, Klassen und Pseudoelemente kennen.

  • Ein Verständnis der Grundlagen der Programmierung. Während es möglich ist, jQuery ohne fortgeschrittene JavaScript-Kenntnisse zu schreiben, sollten Sie mit den Konzepten von variables and datatypes sowie https: // www vertraut sein. taniarascia.com/javascript-day-two/[math and logic] wird erheblich helfen.

JQuery einrichten

jQuery ist eine JavaScript-Datei, mit der Sie in Ihrem HTML-Code verknüpfen. Es gibt zwei Möglichkeiten, jQuery in ein Projekt aufzunehmen:

  • Laden Sie eine lokale Kopie herunter.

  • Verknüpfen Sie eine Datei über das Content Delivery Network (CDN).

Wir verwenden das CDN, um in unseren Beispielen auf jQuery zu verweisen. Die neueste Version von jQuery finden Sie unter Google’s Hosted Libraries. Wenn Sie es stattdessen herunterladen möchten, können Sie eine Kopie von jQuery von der offiziellen Website herunterladen.

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 der Projekt.

project/
├── css/
|   └── style.css
├── js/
|   └── scripts.js
└── index.html

Erstellen Sie zunächst ein HTML-Skelett und speichern Sie es unter dem Namen "+ index.html".

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

Verknüpfen Sie das jQuery-CDN direkt vor dem schließenden Tag "+ </ body> ", gefolgt von Ihrer eigenen benutzerdefinierten JavaScript-Datei " scripts.js +".

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>



</body>

</html>

Ihre JavaScript-Datei (+ scripts.js +) muss unter der jQuery-Bibliothek im Dokument enthalten sein, sonst funktioniert sie nicht.

Zu diesem Zeitpunkt wird die jQuery-Bibliothek nun in Ihre Site geladen und Sie haben vollen Zugriff auf die jQuery API.

JQuery verwenden

Im Kern wird jQuery verwendet, um über das DOM eine Verbindung mit HTML-Elementen im Browser herzustellen.

Das *Document Object Model * (DOM) ist die Methode, mit der JavaScript (und jQuery) in einem Browser mit dem HTML-Code interagieren. Um genau zu sehen, was das DOM ist, klicken Sie in Ihrem Webbrowser mit der rechten Maustaste auf die aktuelle Webseite und wählen Sie * Inspizieren *. Dies öffnet die Entwicklertools. Der HTML-Code, den Sie hier sehen, ist das DOM.

Jedes HTML-Element wird im DOM als * Knoten * betrachtet - ein Objekt, das JavaScript berühren kann. Diese Objekte sind in einer Baumstruktur angeordnet, wobei sich "+ <html> +" näher an der Wurzel befindet und jedes verschachtelte Element ein Zweig weiter entlang des Baums 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 HTML-Rohausgabe der Website angezeigt. Es ist zunächst leicht, das DOM mit der HTML-Quelle zu verwechseln, aber sie unterscheiden sich - die Seitenquelle ist genau das, was in der HTML-Datei geschrieben ist. Es ist statisch und wird sich nicht ändern und wird von JavaScript nicht beeinflusst. Das DOM ist dynamisch und kann sich ändern.

Die äußerste Ebene des DOM, die Ebene, die den gesamten + <html> + - Knoten umschließt, ist das * document * -Objekt. Um mit der Bearbeitung der Seite mit jQuery zu beginnen, müssen wir zunächst sicherstellen, dass das Dokument "bereit" ist.

Erstellen Sie die Datei + scripts.js + in Ihrem + js / + Verzeichnis und geben Sie den folgenden Code ein:

js / scripts.js

$(document).ready(function() {
   // all custom jQuery will go here
});

Der gesamte von Ihnen geschriebene jQuery-Code wird in den obigen Code eingeschlossen. jQuery erkennt diesen Bereitschaftszustand, sodass der in dieser Funktion enthaltene Code erst ausgeführt wird, wenn das DOM zur Ausführung von JavaScript-Code bereit ist. Auch wenn JavaScript in einigen Fällen erst beim Rendern von Elementen geladen wird, wird dieser Block als bewährte Methode angesehen.

In der Einleitung dieses Artikels haben Sie ein einfaches "Hallo, Welt!" - Skript gesehen. Um dieses Skript zu starten und Text mit jQuery in den Browser zu drucken, erstellen wir zunächst ein leeres Absatzelement auf Blockebene mit der ID "+ demo +".

index.html

...
<body>


...

jQuery wird mit dem Dollarzeichen (+ $ +) aufgerufen und durch dieses dargestellt. Wir greifen mit jQuery hauptsächlich mit CSS-Syntax auf das DOM zu und wenden eine Aktion mit einer Methode an. Ein einfaches jQuery-Beispiel folgt diesem Format.

$("selector").method();

Da eine ID in CSS durch ein Hash-Symbol ("+ # ") dargestellt wird, greifen wir mit dem Selektor " # demo " auf die Demo-ID zu. ` html () +` ist eine Methode, die den HTML-Code innerhalb eines Elements ändert.

Wir werden jetzt unser benutzerdefiniertes Programm "Hello, World!" In den jQuery-Wrapper "+ ready () " einfügen. Fügen Sie diese Zeile zu Ihrer ` scripts.js`-Datei innerhalb der vorhandenen Funktion hinzu:

js / scripts.js

$(document).ready(function() {

});

Sobald Sie die Datei gespeichert haben, können Sie die Datei "+ index.html" in Ihrem Browser öffnen. Wenn alles richtig funktioniert hat, sehen Sie die Ausgabe "+ Hallo, Welt! +".

Wenn Sie zuvor vom DOM verwirrt waren, können Sie es jetzt in Aktion sehen. Klicken Sie mit der rechten Maustaste auf den Text "Hello, World!" Auf der Seite und wählen Sie "Inspect Element". Das DOM zeigt nun "+ <p id =" demo "> Hallo Welt! </ P> " an. Wenn Sie * Seitenquelle anzeigen *, sehen Sie nur " <p id =" demo "> </ p> +", das rohe HTML, das wir geschrieben haben.

Selektoren

Mit Selektoren teilen wir jQuery mit, an welchen Elementen wir arbeiten möchten. Die meisten jQuery-Selektoren sind mit einigen jQuery-spezifischen Ergänzungen identisch mit denen, mit denen Sie in CSS vertraut sind. Sie können die vollständige Liste der jQuery-Selektoren auf den offiziellen Dokumentationsseiten anzeigen.

Um auf einen Selektor zuzugreifen, verwenden Sie das jQuery-Symbol "+ $ ", gefolgt von Klammern " () +".

$("selector")

Strings in doppelten Anführungszeichen werden von jQuery style guide bevorzugt, obwohl auch Strings in einfachen Anführungszeichen häufig verwendet werden.

Im Folgenden finden Sie eine kurze Übersicht über einige der am häufigsten verwendeten Selektoren.

  • + $ (" * ") + - * Platzhalter: * wählt jedes Element auf der Seite aus.

  • + $ (this) + - * Current: * wählt das aktuelle Element aus, das innerhalb einer Funktion bearbeitet wird.

  • + $ (" p ") + - * Tag: * wählt jede Instanz des Tags + <p> + aus.

  • + $ (". example ") + - * Class: * wählt jedes Element aus, auf das die Klasse + example + angewendet wurde.

  • + $ (" # example ") + - * Id: * wählt eine einzelne Instanz der eindeutigen + example + id aus.

  • + $ (" [type = 'text'] ") + - * Attribute: * wählt ein Element aus, bei dem auf das Attribut + type + ein + text + angewendet wird.

  • + $ (" p: first-of-type ") + - * Pseudoelement: * wählt das erste + <p> + aus.

Im Allgemeinen treffen Sie am häufigsten auf Klassen und IDs, wenn Sie mehrere Elemente auswählen möchten, und auf IDs, wenn Sie nur ein Element auswählen möchten.

jQuery-Ereignisse

Im Beispiel "Hello, World!" Wurde der Code 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 HTML schreiben können, ohne uns um jQuery zu kümmern. Wir müssen jedoch jQuery verwenden, wenn wir möchten, dass Text auf der Seite mit einem Klick auf eine Schaltfläche angezeigt wird.

Kehren Sie zu Ihrer + index.html-Datei zurück und fügen Sie ein` + <button> + `-Element hinzu. Wir werden diese Schaltfläche verwenden, um auf unser Klickereignis zu warten.

index.html

...
<body>


<p id="demo"></p>

Mit der Methode "+ click () +" rufen wir eine Funktion auf, die unseren "Hello, World!" - Code enthält.

js / scripts.js

$(document).ready(function() {

});

Unser + <button> + Element hat eine ID namens + trigger +, die wir mit + $ (" # trigger ") + auswählen. Wenn Sie "+ click () " hinzufügen, wird darauf hingewiesen, dass ein Klickereignis abgehört werden soll, dies ist jedoch noch nicht geschehen. Jetzt rufen wir eine Funktion mit unserem Code in der Methode " click () +" auf.

function() {
   $("#demo").html("Hello, World!");
}

Hier ist der endgültige Code.

js / scripts.js

$(document).ready(function() {
   $("#trigger").click(function() {


});

Speichern Sie die Datei "+ scripts.js" und aktualisieren Sie "+ index.html" im Browser. Wenn Sie nun auf die Schaltfläche klicken, wird der Text „Hallo, Welt!“ Angezeigt.

Ein * Ereignis * ist jedes Mal, wenn der Benutzer mit dem Browser interagiert. Normalerweise geschieht dies mit der Maus oder der Tastatur. In dem soeben erstellten Beispiel wurde ein Klickereignis verwendet. In der offiziellen jQuery-Dokumentation können Sie eine vollständige Liste der jQuery-Ereignismethoden anzeigen. Im Folgenden finden Sie eine kurze Übersicht über einige der am häufigsten verwendeten Ereignismethoden.

  • + click () + - * Click: * wird mit einem einzigen Mausklick ausgeführt.

  • + hover () + - * Hover: * wird ausgeführt, wenn der Mauszeiger über ein Element bewegt wird. + mouseenter () + und + mouseleave () + gelten nur für die Maus, die ein Element betritt bzw. verlässt.

  • + submit () + - * Submit: * wird ausgeführt, wenn ein Formular gesendet wird.

  • + scroll () + - * Scroll: * wird ausgeführt, wenn der Bildschirm gescrollt wird.

  • + keydown () + - * keydown: * wird ausgeführt, wenn Sie eine Taste auf der Tastatur drücken.

Verwenden Sie die Methode + scroll () +, um Bilder zu animieren oder einzublenden, während ein Benutzer den Bildschirm herunterrollt. Verwenden Sie die Methode + keydown () +, um ein Menü mit der Taste + ESC + zu verlassen. Verwenden Sie die Methode + click () +, um ein Dropdown-Akkordeon-Menü zu erstellen.

Das Verständnis von Ereignissen ist für die Erstellung dynamischer Website-Inhalte mit jQuery von entscheidender Bedeutung.

jQuery-Effekte

jQuery effects arbeiten Hand in Hand mit Ereignissen, indem Sie Animationen hinzufügen und auf andere Weise Elemente auf der Seite bearbeiten können.

Wir werden ein Beispiel erstellen, in dem wir ein Popup-Overlay öffnen und schließen. Während wir zwei IDs verwenden könnten - eine zum Öffnen und eine zum Schließen des Overlays -, verwenden wir stattdessen eine Klasse zum Öffnen und Schließen des Overlays mit derselben Funktion.

Löschen Sie die aktuellen + <button> + und + <p> + Tags aus dem Hauptteil Ihrer + index.html-Datei und fügen Sie Folgendes zu Ihrem HTML-Dokument hinzu:

index.html

...
<body>





...

In unserer Datei "+ style.css" verwenden wir eine minimale Menge an CSS, um die Überlagerung "" mit " display: none" auszublenden und auf dem Bildschirm zu zentrieren.

css / style.css

.overlay {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 200px;
 width: 200px;
 background: gray;
}

Zurück in der Datei "+ scripts.js " verwenden wir die Methode " toggle () ", mit der die CSS-Eigenschaft " display " zwischen " none " und " block +" umgeschaltet wird, wobei und ausgeblendet werden Zeigt die Überlagerung an, wenn Sie darauf klicken.

js / scripts.js

$(document).ready(function() {



});

Aktualisieren Sie + index.html. Sie können jetzt die Sichtbarkeit des Modals umschalten, indem Sie auf die Schaltflächen klicken. Sie können + toggle () + in + fadeToggle () + oder + slideToggle () + ändern, um einige andere integrierte jQuery-Effekte anzuzeigen.

Im Folgenden finden Sie eine kurze Übersicht über einige der am häufigsten verwendeten Effektmethoden.

  • + toggle () + - * Toggle: * schaltet die Sichtbarkeit eines oder mehrerer Elemente um. + show () + und + hide () + sind die verwandten Einwegeffekte.

  • + fadeToggle () + - * Fade Toggle: * Schaltet die Sichtbarkeit um und animiert die Deckkraft eines oder mehrerer Elemente. + fadeIn () + und + fadeOut () + sind die verwandten Einwegeffekte.

  • + slideToggle () + - * Slide Toggle * schaltet die Sichtbarkeit eines Elements oder von Elementen mit einem Gleiteffekt um. + slideDown () + und + slideUp () + sind die verwandten Einwegeffekte.

  • + animate () + - * Animate * führt benutzerdefinierte Animationseffekte auf die CSS-Eigenschaft eines Elements aus.

Wir verwenden jQuery-Ereignisse, um auf eine Benutzerinteraktion wie das Klicken auf eine Schaltfläche zu warten, und wir verwenden jQuery-Effekte, um Elemente weiter zu bearbeiten, sobald diese Aktion ausgeführt wird.

Fazit

In diesem Handbuch haben wir gelernt, wie Sie Elemente mit jQuery auswählen und bearbeiten und wie Ereignisse und Effekte zusammenarbeiten, um dem Benutzer eine interaktive Web-Erfahrung zu ermöglichen.

Von hier aus sollten Sie ein tieferes Verständnis für die Funktionen von jQuery haben und auf dem Weg sein, Ihren eigenen Code zu schreiben.

Related