Wenn du jQuery lernen möchtesst und auf der Suche nach Tutorials sowie kostenlosen Ressourcen bist, um das beliebte JavaScript-Framework frustfrei zu verstehen, dann bist du endlich richtig gelandet. In diesem Artikel werde ich dir die Grundzüge von jQuery, die Vorteile und Features vorstellen. Weiterhin findest du viele Tutorials zum durchstarten.
Starten wir mit der häufigsten Frage: Was ist jQuery eigentlich und was kann ich damit machen?
1. Was ist jQuery?
jQuery ist eine funktionsreiche JavaScript-Bibliothek, die in einer einzigen .js-Datei enthalten ist. jQuery wurde Anfang 2006 von John Resig gegründet. Das jQuery-Projekt wird derzeit von vielen Entwicklern als Open-Source-Projekt betrieben und ständig weiterentwickelt.
Um die gleiche Funktionalität mit JavaScript zu erreichen, die dir jQuery bietet, müsstest du viele tausende Zeilen Code schreiben. Somit ist jQuery viel leichter zu lernen und es erhöht deine Produktivität beim Programmieren. Es bietet viele fertige Funktionen, mit denen du die verschiedenesten Aufgaben einfach und schnell erledigen kannst.
Es bietet CSS-ähnliche Selektoren mit denen Du Elemente auf deiner Webseite auswählen und dann manipulieren kannst.
Zwei Beispiele für jQuery:
- Wenn du auf einen Button klickst, ändert sich die Hintergrundfarbe
- Wenn du auf einen Link klickst, wird eine geheime Schaltfläche angezeigt, die vorher unsichtbar war.
Du kannst beisipelsweise "p"-Tags erfassen und diese umstylen. Mit jQuery ist es möglich coole Animationen wie das Ein- und Ausblenden und Umschalten von Schaltflächen und anderen Elementen durchführen. jQuery ist eine mächtige Bibliothek, wenn es um die Interaktivität und Usability von Webseiten geht.
Die Beliebtheit kann dadurch erklärt werden, dass viele Anfänger sich sofort auf jQuery stürzen, ohne vorher JavaScript gelernt zu haben. Das zeigt, wie nützliche diese "kleine" Bibliothek wirklich ist. Der Sprichwort von jQuery "write less do more", also "weniger schreiben und mehr machen", kann ich persönlich bestätigen.
Auch wenn es für Anfänger leicht ist jQuery zu lernen, ist es hilfreich, wenn du ein grundlegendes Verständnis von HTML, CSS und ein wenig JavaScript hast. Anfänger-Kenntnisse reichen hier vollkommen aus.
Du bist noch hier? Super! Schauen wir uns zunächst die wichtigsten Vorteile an.
Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)
2. Die Vorteile von jQuery
Wenn du mit jQuery nocht nicht vertraut bist, fragst du dich vielleicht, was es so besonders macht. Es gibt viele Vorteile, warum Du jQuery lernen und anwenden solltest.
2.1. Leicht zu erlernen:
jQuery ist leicht zu erlernen. Wenn du bereits minimale Erfahrungen mit JavaScript hast, wirst du dich besonders leicht zurechtfinden.
2.2. Weniger coden, mehr umsetzen:
jQuery bietet eine Vielzahl von Funktionen, die die Produktivität von Entwicklern erhöhen. Ganz nach dem Motto: Weniger coden und mehr umsetzen.
2.3. Ausführliche API-Dokumentation:
jQuery bietet eine ausgezeichnete Online-Dokumentation. Wenn du ein Mal reinschauen magst, findest du hier den Link zur offiziellen Dokumentation von jQuery.
2.4. Cross-Browser-Unterstützung:
jQuery bietet eine hervorragende Cross-Browser-Unterstützung, ohne dass zusätzlicher Code geschrieben werden muss.
Ok das war ein schneller Blick zu den wichtigsten Vorteilen. Jetzt vertiefen wir dein Wissen um die vielen jQuery-Features.
3. Wichtige Features von jQuery
3.1. Effekte/Animationen erstellen:
Du kannst Effekte auf DOM-Elemente anwenden, wie z.B. Ein- oder Ausblenden von Elementen, Ein- oder Ausblenden der Sichtbarkeit, Slider-Effekte, Animationen usw.
3.2. Events/Ereignisse:
Die jQuery-Bibliothek enthält Funktionen, die DOM-Ereignissen entsprechen, wie z.B. der einfache Mausklick, Doppelklick, mouseenter, mouseleave, blur, keyup, keydown usw. Diese Funktionen sind für die meisten Browser kompatibel (cross-browser).
3.3. Cross-Browser-Unterstützung:
jQuery behandelt automatisch Cross-Browser-Probleme, so dass sich der User nicht darum kümmern muss. Derzeit unterstützt jQuery IE 6.0+, Firefox, Safari 3.0+, Chrome und Opera 9.0+.
3.4. DOM-Auswahl:
jQuery bietet Selektoren zum Abrufen von DOM-Elementen, das sind die Elemente im Quellcode, auf der Grundlage verschiedener Kriterien. Selektoren können z.B. durch den Tag-Name, id, css-Klassennamen, Attribut-Name, oder des n-ten Kinds in der Hierarchie gewählt werden.
3.5. DOM-Manipulation:
Du kannst die meisten DOM-Elemente mit verschiedenen eingebauten jQuery-Funktionen manipulieren. Zum Beispiel das Hinzufügen oder Entfernen von Elementen, die Änderung von HTML-Inhalten, CSS-Klassen usw.
3.6. AJAX:
jQuery enthält auch einfach zu verwendende AJAX-Funktionen, um Daten von Servern zu laden, ohne die ganze Seite neu zu laden.
Im nächsten Abschnitt fangen wir endlich an jQuery herunterzuladen bzw. zu installieren. (Es ist leichter als du denkst .... ? )
4. jQuery einbinden bzw. downloaden - Hier kannst du mit der Praxis durchstarten
Es gibt mehrere Möglichkeiten, jQuery auf deinen Websites zu verwenden. Die bekanntesten sind folgende zwei Möglichkeiten:
- jQuery von einer externen Quelle einbinden, über einen sogenannten CDN. Du kannst z.B. den kostenlosen CDN von jQuery.com oder Google benutzen
- jQuery-Bibliothek von jQuery.com herunterladen. (z.B. wenn du nicht mit dem LerneProgrammieren Online-Editor arbeiten möchtest.
4.1. jQuery von einer externen Quelle einbinden (kein Download notwendig)
Wenn Du jQuery nicht herunterladen und hosten möchtest, kannst du es über einen CDN (Content Delivery Network) einbinden.
So geht's - Füge dafür folgenden <script> Code in den Footer einer .HTML-Datei ein:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Viele Leute haben bereits jQuery von Google oder anderen Quellen heruntergeladen, da sie eine andere Website besucht haben, wo dieser Code eingebunden war. Daher wird die jQuery-Datei aus dem Cache geladen, was zu einer schnelleren Ladezeit führt.
4.2. jQuery herunterladen und selbst hosten
Wenn Du jQuery lieber downloaden und dann selbst hosten willst, kannst du es wie folgt einbinden.
<script src="jquery-3.4.1.min.js"></script>
Hinweis: Achte darauf den richtigen Unterordner unter src="" anzugeben, wenn du die jQuery-Datei nicht im Root-Ordner ablegst.
Ok jetzt wo du weißt, wie man jQuery einbindet, können wir unseren ersten Code schreiben.
5. jQuery in der Praxis lernen
Um zu starten, lade dir zunächst jQuery herunter oder binde es über den CDN ein, wie im letzten Schritt gezeigt. Jetzt bist du bereit es in dein HTML-Dokument einzufügen.
Wie bei anderen Programmiersprachen auch, brauchen wir zum Coden mit jQuery einen Editor. Welchen Editor du bevorzugst, liegt bei dir. Du kannst jeden Texteditor benutzen, der JavaScript unterstützt. Der Vollständigkeit halber sind hier ein paar beliebte Editoren.
Editor-Favoriten
- Visual Studio Code
- Notepad++
- Sublime Text (kostenlose Trialversion)
Zum Starten kannst du das folgende HTML-Template kopieren und in eine Textdatei einfügen. Ändere den Namen der Textdatei dann in index.html um und speichere die Datei.
HTML-Vorlage kopieren/einfügen und als index.html speichern:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Lernen - Mein Skript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>Hallo LerneProgrammieren!</h1>
</body>
</html>
Wenn du den letzten Schritt befolgt hast, sollte dein Texteditor geöffnet und die oberen Codezeilen dort eingefügt sein.
Tipp: Wie du siehst, haben wir das Attribut type="text/javascript" innerhalb des <script>-Tags nicht eingefügt. Der Grund dafür ist, dass das in HTML5 nicht erforderlich ist. JavaScript ist die Standard-Skriptsprache in HTML5 und in allen modernen Browsern verfügbar. Du kannst das Attribut freiwillig einfügen, z.B. um deinen Code lesbarer zu machen.
6. Die Syntax von jQuery einfach verstehen
Eine jQuery-Anweisung beginnt normalerweise mit:
- dem Dollar-Zeichen ($) und
- endet mit einem Semikolon (;).
In jQuery ist das Dollarzeichen ($) nur eine Abkürzung (ein Alias) für "jQuery". Wir sind also faul und benutzen für den Aufruf von jQuery nur das Dollarzeichen ($)
Code-Beispiel - Füge diesen Code vor dem </head>-Tag in deiner index.html ein:
<script>
$(document).ready(function() {
alert("Ich bin ein jQuery Skript!");
});
</script>Das oben gezeigte Code-Beispiel zeigt dem User, sobald die Webseite fertig geladen ist, eine einfache Alert-Meldung mit dem Text "Ich bin ein jQuery-Skript!" an.
7. Dein erstes jQuery-Skript
Im nächsten Schritt erweitern wir unser kleines Skript so, dass die Alert-Meldung nur angezeigt wird, wenn wir auf unsere Überschrift "Hallo LerneProgrammieren!" klicken.
Damit wir unsere Überschrift als Trigger (Auslöser) benutzen können, müssen wir diese zunächst auswählen. In jQuery machen wir das mit Selektoren. Du kannst HTML-Elemente nach dem Element-Namen, der ID, der Klasse und vielen weiteren Selektoren auswählen.
In unserem Beispiel werden dir das HTML-Tag "h1" selektieren. In jQuery funktioniert das so:
H1-Überschrift selektieren mit jQuery:
$("h1")
Jetzt wo du die Überschrift selektiert hast, fügen wir ein Event (eine Aktion) hinzu. Hierfür benutzen wir das Klick-Event.
$("h1").click();
An dieser Stelle hast du die H1-Überschrift ausgewählt und dieser ein Event, nämlich das Klick-Event, zugewiesen. Im nächsten Schritt definieren wir in der click()-Methode, was passieren soll, wenn ein Webseitenbesucher klickt.
$("h1").click(function() {
alert("Ich bin ein jQuery Skript!");
});Im o.g. Code-Beispiel haben wir die click()-Methode definiert. Dafür habe ich einfach unsere alert()-Codezeile kopiert und eingefügt. Den gezeigten Code fügen wir jetzt nur noch in die Document.Ready Funktion ein. Dann sind wir schon fertig.
Das fertige jQuery-Skript sieht so aus:
<script>
$(document).ready(function() {
$("h1").click(function() {
alert("Ich bin ein jQuery Skript!");
});
});
</script>
Das fertige Skript kannst du in deine HTML-Datei einfügen. Speichere die Datei dann ab und öffne sie mit deinem Browser.
Sobald du die Überschrift "Hallo LerneProgrammieren!" anklickst, sollte die Dialogbox (Alert-Meldung) erscheinen.
Das war es auch schon. Du hast soeben ein einfaches jQuery-Skript gebaut. Wenn du weitere nützliche Funktionen von jQuery lernen willst, findest du in unserem Blog viele praktische Tutorials für Anfänger und Fortgeschrittene. Für einen noch tieferen Einblick empfehle ich dir unseren jQuery-Schnellstart Kurs. Hier lernst du das Wichtigste zum beliebten JS-Framework in wenigen Stunden. Das Beste daran ist, dass du hier komplett online lernst und in unserem Online-Editor übst. Du musst also nichts installieren oder einbinden und kannst sofort durchstarten.
Wie Du dich auch entscheidest, hoffe ich, dass ich dir einen guten Einblick in jQuery geben konnte. Ich bin auf deine ersten eigenen Skripte gespannt :-)
- Programmiere echte Apps als Anfänger
- Keine Installation, sofort loslegen
- Komplett praxisbezogen
- Zugriff auf Online-Editor
