Was ist jQuery und wie kann man es verwenden?

Einführung

Wenn Sie mit der Welt der Programmierung vertraut sind, wissen Sie, wie wichtig Programmiersprachen sind. Einige der wichtigsten und am häufigsten verwendeten sind HTML, CSS, und JavaScript. Während HTML und CSS Ihnen helfen, Ihre Website zu gestalten und zu strukturieren, ermöglicht JavaScript es Ihnen, diese interaktiv zu gestalten. Es gibt eine Reihe von JavaScript-Bibliotheken, mit denen Sie Ihrem Webprojekt einzigartige Funktionen hinzufügen können. Dazu gehört auch die jQuery-Bibliothek.

jQuery an sich ist keine Programmiersprache. Es ist ein Werkzeug, mit dem Sie die Webentwicklung in JavaScript vereinfachen können. Dies hilft, die Aufgaben einfacher und unkomplizierter zu machen. Es basiert bekanntermaßen auf dem Konzept „Write Less, Do More“. Abgesehen davon, dass jQuery die Webentwicklung erleichtert, bietet es Ihnen auch den zusätzlichen Vorteil der Cross-Browser-Kompatibilität. Dies bedeutet, dass der Code unabhängig vom verwendeten Browser korrekt gerendert werden kann.

Um sich besser zu veranschaulichen, wie jQuery die Dinge prägnanter macht, betrachten wir ein Beispiel. Nehmen wir an, wir schreiben das Programm „Hello, World!“. So würde es in JavaScript bzw. jQuery aussehen:

Beide Codezeilen führen zum gleichen Ergebnis. Wie Sie jedoch sehen können, macht jQuery das Schreiben prägnanter und bringt es auf den Punkt.

In diesem Tutorial lernen Sie alles über die Grundlagen von jQuery. Sie können das Tool für sich selbst von dieser Website herunterladen. Wir werden so vorgehen, als ob Sie ein absoluter Anfänger ohne Vorkenntnisse über jQuery wären. Dieses Tutorial zeigt Ihnen, wie Sie jQuery installieren und einige der grundlegenden Konzepte kennenlernen, die damit verbunden sind. Wir werden einige der gängigen Selektoren, Ereignisse und Effekte in jQuery untersuchen. Anschließend lernen Sie anhand hilfreicher Beispiele, wie Sie Entwicklungskonzepte wie API, DOM und CDN testen können. Lesen Sie weiter, um sich mit der Welt von jQuery vertraut zu machen.

Bevor wir beginnen

Es gibt bestimmte Dinge, die für Sie von Vorteil sind, wenn Sie sie im Voraus wissen. Ein grundlegendes Verständnis der Funktionsweise von HTML und CSS wird Ihnen beispielsweise sehr helfen. Wir werden das in diesem Tutorial nicht behandeln. Wir gehen davon aus, dass Sie zumindest wissen, wie man eine einfache Website einrichtet. Sie sollten auch ein grundlegendes Verständnis dafür haben, wie Programmierung im Allgemeinen funktioniert. Das bedeutet nicht zwangsläufig, dass Sie ein Experte in JavaScript sein müssen, um fortzufahren. Es reicht völlig aus, wenn Sie mit Dingen wie Logik, Variablen und Datentypen in der Programmierung vertraut sind.

So richten Sie jQuery auf Ihrem System ein

Zuerst einmal wollen wir sehen, wie Sie jQuery auf Ihrem System einrichten können. jQuery ist als JavaScript-Datei verfügbar, da es sich um eine JavaScript-Bibliothek handelt. Sie müssen diese Datei im HTML-Code für unsere Website verlinken. Es gibt zwei Möglichkeiten, dies zu tun. Wie ich bereits erwähnt habe, besteht eine Möglichkeit darin, sie von hier herunterzuladen. Abgesehen von der offiziellen Website finden Sie jQuery auch in den Google Hosted Libraries direkt hier.

Eine andere Möglichkeit besteht darin, das Content Delivery Network oder CDN zu verwenden, um die Datei zu verknüpfen. Ein CDN besteht aus einer Reihe von Servern, die dazu beitragen, Webinhalte lokal bereitzustellen. Das Hosten einer jQuery-Datei über ein CDN sorgt dafür, dass die Inhalte den Benutzer viel schneller erreichen. Aus diesem Grund werden wir ab diesem Punkt in diesem Tutorial das Content Delivery Network verwenden.

In unserem ersten Beispiel werden wir ein Webprojekt erstellen. Dieses kleine Projekt enthält style.css im css/-Verzeichnis. script.js befindet sich im js/-Verzeichnis. Schließlich ist eine index.html im Stammverzeichnis des Webprojekts vorhanden:

Für dieses Projekt werden wir ein HTML-Grundgerüst erstellen. Anschließend speichern wir es als index.html:

Hier werden wir die jQuery-Datei verknüpfen. Wie bereits erwähnt, werden wir sie über ein CDN verknüpfen. Sie fügen den jQuery-Link vor dem </body> -Tag ein. Danach können Sie Ihre benutzerdefinierte JavaScript-Datei hinzufügen, die in unserem Beispiel script.js war. Denken Sie daran, die JavaScript-Datei immer unter der jQuery-Bibliothek einzufügen, so wie hier:

Was würden Sie tun, wenn Sie stattdessen eine lokale Kopie der jQuery-Bibliothek heruntergeladen hätten? In diesem Fall müssen Sie die jQuery-Datei im js/-Ordner speichern. Dann können Sie sie als js/jquery.min.js.

jQuery: Die Grundlagen

Bevor wir uns mit den Details befassen, lassen Sie uns einige der Grundlagen von jQuery durchgehen. Die Hauptaufgabe von jQuery besteht darin, das DOM zu verwenden, um HTML-Elemente im Browser zu verbinden. DOM steht für Document Object Model. Es ist die Methode, die es JavaScript ermöglicht, mit HTML in einem Browser zu interagieren. Sie können das DOM visualisieren, indem Sie mit der rechten Maustaste auf Ihre Webseite klicken und „Untersuchen“ auswählen. Das HTML, das in den Entwicklertools angezeigt wird, ist das DOM.

Ein Knoten ist ein einzelnes HTML-Element im DOM. JavaScript kann all diese Objekte oder Elemente ändern. Sie können sich die Anordnung dieser Objekte wie eine baumartige Struktur vorstellen. <html> liegt an der Wurzel, während sich die Elemente weiter verzweigen.

Ein Rechtsklick und die Auswahl von „Seitenquelltext anzeigen“ zeigt Ihnen das rohe HTML der Website. Denken Sie daran, dass dies nicht dasselbe wie das DOM ist. Während das DOM geändert werden kann, ist der HTML-Quellcode völlig statisch. Alle Änderungen, die Sie in JavaScript vornehmen, haben keine Auswirkungen auf diese HTML-Datei. Der gesamte <html>-Knoten ist in eine äußere Schicht namens Document-Objekt eingepackt.

Als Nächstes werden wir sehen, wie Sie Ihre Webseite und deren Funktionen mit jQuery manipulieren können. Bevor Sie dies jedoch tun, müssen Sie sicherstellen, dass die Seite bereit ist.

Geben Sie Folgendes ein, nachdem Sie die script.js-Datei im js/-Verzeichnis erstellt haben:

Nun wird jeder Code, den Sie schreiben, in diesen Code eingepackt. jQuery erkennt die Bereitschaft des Codes. Der Code innerhalb dieser Funktion wird erst ausgeführt, wenn das DOM bereit ist.

Wir werden das „Hello, World!“-Skript wieder aufgreifen, über das wir zu Beginn des Tutorials gesprochen haben. Nehmen wir an, wir möchten dieses Skript initiieren. Um jQuery zu verwenden, um diesen Text im Browser auszugeben, müssen wir die ID demo zu einem leeren Block-Absatz wie diesem:

Um jQuery aufzurufen, müssen wir das $ Symbol verwenden. Sie können CSS-Syntax und -Methoden anwenden, um mit jQuery auf das DOM zuzugreifen. Ein einfaches Beispiel sieht wie folgt aus:

Dies ist das Format, das Sie mit jQuery verwenden werden. Wir wissen bereits, dass das # Symbol für die ID in CSS steht. Daher können Sie auf die Demo-ID zugreifen, indem Sie den #demo.html()-Selektor verwenden. Diese Methode ermöglicht es Ihnen, das in einem Element vorhandene HTML zu ändern.

Der folgende Code zeigt, wie wir das „Hello, World“-Programm in den jQuery- ready()-Wrapper der Datei script.js einfügen:

Sie müssen diese Codezeile in die script.js-Datei einfügen. Speichern Sie diese Datei. Danach können Sie die index.html-Datei im Browser öffnen. Sie sollten die Ausgabe Hello, World! sehen können. Dies ist auch ein guter Zeitpunkt, um das DOM zu überprüfen, um das Verständnis zu erleichtern. Klicken Sie mit der rechten Maustaste auf den Text „Hello, World!“. Wählen Sie „Element untersuchen“. Das DOM zeigt <p id="demo">Hello, World!</p> an. Ein Klick auf „Seitenquelltext anzeigen“ zeigt Ihnen dagegen nur das reine HTML. In diesem Fall wäre das <p id="demo"></p>.

Was sind Selektoren?

Nun kommen wir zu einigen der wichtigsten Funktionen in jQuery. Dazu gehören Selektoren. jQuery-Selektoren teilen dem Programm mit, mit welchen Elementen Sie arbeiten oder welche Sie „auswählen“ möchten. Sie sind den Selektoren, die Sie in CSS verwenden, sehr ähnlich. Hier ist das grundlegende Format für den Zugriff auf einen Selektor in jQuery:

Sie können Zeichenketten in einfachen oder doppelten Anführungszeichen verwenden, obwohl der jQuery-Styleguide bevorzugt Letzteres. Wenn Sie möchten, können Sie die vollständige Liste der jQuery-Selektoren auf dieser offiziellen Seite einsehen. Zu Ihrer Information finden Sie hier einige der am häufigsten verwendeten Selektoren:

• $("*")

Dies ist der Wildcard-Selektor. Er wählt jedes Element auf Ihrer Seite aus.

• $(this)

Dies ist der Current-Selektor. Er wählt das Element aus, auf dem Sie gerade mit einer Funktion operieren.

• $("p")

Dies ist der Tag-Selektor. Er wählt jede Instanz des <p>-Tags aus.

• $(".example")

Dies ist der Klassen-Selektor. Er wählt jedes einzelne Element aus, das die Klasse example angewendet hat.

• $("#example")

Dies ist der ID-Selektor. Er wählt nur eine einzige Instanz der example-ID aus.

• $("[type='text']")

Dies ist der Attribut-Selektor. Er wählt jedes Element aus, bei dem text auf das Attribut type angewendet ist.

• $("p:first-of-type")

Dies ist der Pseudoelement-Selektor. Er hilft Ihnen, das erste <p>.

Was sind Events?

Es gibt einige Funktionen der Webseite, die geladen werden, sobald die Seite geladen wird. Betrachten Sie das „Hello, World“-Beispiel. In diesem Fall könnten wir den Code direkt in das Quell-HTML einfügen. Aber was passiert, wenn das Laden einer Funktion eine Benutzerinteraktion erfordert? An dieser Stelle wird jQuery nützlich.

Angenommen, wir möchten, dass ein Text erscheint, nachdem der Benutzer auf einen Button klickt. Um diese Funktion hinzuzufügen, müssen Sie ein <button>-Element zur index.html-Datei hinzufügen. Dieser Button lauscht auf das Click-„Event“:

Jedes Mal, wenn der Benutzer mit dem Browser interagiert, wird dies als Ereignis betrachtet. Die Interaktion kann über den Mauszeiger oder die Tastatur erfolgen. Im obigen Beispiel ist der Klick auf eine Schaltfläche unser Ereignis. Deshalb wird es als Klick-Ereignis bezeichnet.

Als Nächstes müssen wir eine Funktion aufrufen, die den „Hello, World“-Code enthält. Dazu verwenden wir die click() -Methode:

Wie Sie sehen können, lautet die ID unseres <button>-Elements trigger. Wir können es mit $(“#trigger") auswählen. Der Zweck des Hinzufügens der click()-Methode besteht darin, das Programm auf das Klick-Ereignis lauschen zu lassen. Als Nächstes platzieren wir die Funktion mit dem Textcode innerhalb der Methode:

Unser Code wird am Ende ungefähr so aussehen:

Jetzt können Sie die script.js-Datei speichern. Aktualisieren Sie die index.html im Browser, um die Änderungen zu übernehmen. Nachdem Sie auf die Schaltfläche geklickt haben, wird die Testausgabe „Hello, World!“ angezeigt.

Es gibt auch andere Arten von jQuery-Ereignissen als nur click. Eine vollständige Liste dieser Ereignismethoden finden Sie in diesem offiziellen Dokument. Hier sind einige der am häufigsten verwendeten, auf die Sie gelegentlich stoßen könnten:

• click()

Das click-Ereignis führt den Code bei einem einfachen Mausklick aus.

• hover()

Das hover-Ereignis führt den Code aus, wenn der Mauszeiger über ein Element bewegt wird. Sie können auch angeben, ob der Code durch das Bewegen der Maus in das Element hinein oder aus ihm heraus mit mouseenter() beziehungsweise mouseleave() ausgelöst wird.

• submit()

Das Absenden eines Formulars löst den Code aus.

• scroll()

Das Scrollen auf dem Bildschirm ist das Ereignis, das den Code ausführt.

• keydown()

Das Drücken der Pfeiltaste nach unten auf der Tastatur führt den Code aus.

Was sind Effekte?

jQuery-Effekte arbeiten mit jQuery-Events zusammen. Der Hauptzweck von Effekten besteht, wie der Begriff schon sagt, darin, der Seite Animationen hinzuzufügen. Sie ermöglichen es Ihnen, die Elemente zu manipulieren, um verschiedene Arten von Effekten anzuwenden. Diese Effekte können durch bestimmte Events ausgelöst werden.

Um dies besser zu verstehen, betrachten wir ein Beispiel. Nehmen wir an, wir möchten ein Popup-Overlay öffnen und schließen. Eine Möglichkeit wäre die Verwendung von zwei verschiedenen IDs. Eine würde das Overlay öffnen und die andere würde es schließen. Die andere Möglichkeit besteht darin, eine Klasse dafür zu verwenden. Der Vorteil der Verwendung einer Klasse besteht darin, dass dieselbe Funktion das Overlay öffnen und schließen kann.

Öffnen Sie Ihre index.html-Datei. Löschen Sie dann die <button> und <p> -Tags aus dem Body. Fügen Sie nun die folgenden Codezeilen zum HTML hinzu:

Schauen wir uns als Nächstes unsere style.css-Datei an. Hier ist es unser Ziel, minimales CSS zu verwenden, um das Overlay auszublenden. Dafür verwenden wir display: none und zentrieren es so:

Als Nächstes verwenden wir die toggle()-Methode. Mit dieser Methode können wir die display-Eigenschaft zwischen none und block umschalten. Daher wird das Overlay bei jedem Klick ausgeblendet und angezeigt. Fügen Sie diesen Code der script.js-Datei hinzu:

Aktualisieren Sie schließlich index.html, um die Änderungen anzuwenden. Jetzt können Sie die Sichtbarkeit des Modals umschalten. Sie müssen nur auf die Schaltflächen klicken. Es gibt andere jQuery-Effekte, die Sie in Kombination damit verwenden können. Zum Beispiel können Sie das einfache toggle() in slideToggle() oder fadeToggle().

Im Folgenden sind einige der am häufigsten verwendeten Effektmethoden in jQuery aufgeführt:

• toggle()

Diese Methode ermöglicht es Ihnen, die Sichtbarkeit des Elements zu ändern. Die damit verbundenen Einweg-Effekte sind show() und hide().

• fadeToggle()

Mit dieser Methode können Sie die Sichtbarkeit und Deckkraft des Elements durch Animation umschalten. Die Einweg-Effekte in diesem Fall sind fadeIn() und fadeOut().

• slideToggle()

Mit dieser Methode können Sie Schiebeeffekte verwenden, um die Sichtbarkeit des Elements umzuschalten. Die Einweg-Effekte in diesem Fall sind slideUp() und slideDown().

• animate()

Diese Effektmethode ermöglicht es Ihnen, benutzerdefinierte Animationseffekte auszuführen. Sie verwendet die CSS-Eigenschaft des angegebenen Elements.

Fazit

Hoffentlich war dieses Tutorial hilfreich, um eine gründliche Einführung in jQuery zu geben. Es ist ein unglaublich nützliches Werkzeug, das die Webentwicklung und das Schreiben von Code erheblich erleichtert. Dies gilt insbesondere dann, wenn Sie relativ neu in der Welt der Programmierung sind.

Wir haben die verschiedenen Elemente untersucht, die die Grundlagen von jQuery ausmachen. Wir haben auch gelernt, wie Sie diese Elemente auswählen und ändern können und wie Sie Ereignisse und Effekte sinnvoll einsetzen. Die Beherrschung von Tools wie jQuery kann Ihnen dabei helfen, Websites voller interaktiver Funktionen zu erstellen, die für ein ansprechendes Benutzererlebnis sorgen.

Sehen Sie sich einige Ressourcen aus unserem Blog an, die Ihnen bei der Arbeit mit JavaScript helfen:

• Eine Anleitung zum Hinzufügen von JavaScript zu HTML
• Arbeiten mit JavaScript: Wie Klassen funktionieren 
• Arbeiten mit JavaScript: Wie Prototypen und Vererbung funktionieren

Viel Spaß beim Programmieren!