| jQuery | |
|---|---|
 | |
| Basisdaten | |
| Entwickler | jQuery Team |
| Erscheinungsjahr | August 2005[1] |
| Aktuelle Version | 4.0.0[2] (17. Januar 2026) |
| Aktuelle Vorabversion | 2.1.0-beta2[3] (15. November 2013) |
| Betriebssystem | plattformunabhängig |
| Programmiersprache | JavaScript |
| Kategorie | Bibliothek |
| Lizenz | MIT |
| jquery.com | |
jQuery (auchjQuery Core) ist einefreieJavaScript-Bibliothek, die Funktionen zurDOM-Navigation und -Manipulation zur Verfügung stellt.
jQuery ist die meistverwendete JavaScript-Bibliothek.[4] 77 % aller Websites[4] und 69 % der 10.000 meistbesuchten Websites[5] nutzen jQuery (Stand: September 2022). Die Bibliothek wird in vielenContent-Management-Systemen und Webframeworks bereits mitgeliefert, zum Beispiel inJoomla[6],WordPress[7],MediaWiki[8] oderDrupal[9].
Ursprünglich sollte die BibliothekjSelect genannt werden. Da dieDomain für diesen Namen schon vergeben war, entschied sich der EntwicklerJohn Resig für den Namen jQuery.[10] Die von John Resig entwickelte Bibliothek wurde im Januar 2006 auf demBarcamp (NYC) in New York veröffentlicht. Inzwischen wird die Bibliothek jQuery von der unabhängigenjQuery Foundation fortlaufend weiterentwickelt und um weitere Bibliotheken ergänzt mitJQuery UI,jQuery Mobile,Sizzle Selector Engine undQUnit. Der Erfinder John Resig hat sich mittlerweile aus der aktiven Entwicklungsarbeit zurückgezogen und diese an das jQuery Team übergeben, welchem er als Ehrenmitglied weiterhin angehört.[11]
Bis 2016 wurden mit 1.x und 2.x zwei Versionsstränge gepflegt, die sich hinsichtlich der Browserkompatibilität unterscheiden. Die Versionen 1.x (ab 1.9) und 2.x besitzen eine kompatibleAPI. Seit dem 9. Juni 2016 mit der Veröffentlichung der Version 3.0 wurde ein neuer Versionsstrang eingeführt. Dieser ist im Großteil ebenfallsrückwärtskompatibel.
Der Versionsstrang 1.x begann im Juni 2006 als Version 1.0 alsAlpha-Version.[12] Die erste Version des Versionsstrangs 2.x wurde im April 2013 unter der Bezeichnung „jQuery 2.0“ veröffentlicht. Aufgrund besserer JavaScript-Unterstützung modernerWebbrowser (zum Beispiel Zugriffe aufDOM-Knoten) konnte der Quellcode von jQuery 2.0 grundlegend umstrukturiert und aufgeräumt werden. Im Gegenzug wurde die Unterstützung für ältere Browser wie denInternet Explorer bis einschließlich Version 8 (und derKompatibilitätsansicht in aktuelleren Versionen) entfernt. Weil diese älteren Browser je nach Einsatzgebiet teilweise noch relativ hohe Verwendungszahlen besaßen, wurde die 1.x-Versionslinie aus Kompatibilitätsgründen bis zum Erscheinen der Version 3.0 am 9. Juni 2016 gewartet und aktualisiert.[13][14] Die Versionslinien 1.x und 2.x werden weiterhin mit sicherheitsrelevantenPatches versorgt.[13]Der Versionsstrang 3.x verzichtet gänzlich auf die Unterstützung vonInternet-Explorer-spezifischen Eigenheiten. Unter anderem wurde mit Version 3.0 die API fürjQuery.deferred geändert und es wurden veralteteEvent-Listener, namentlich.load,.unload und.error, entfernt.[13]
jQuery bietet JavaScript-Entwicklern folgende Funktionen:
each-FunktionDie jQuery-Basisbibliothek besteht aus einer JavaScript-Datei, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.
Nachdem die Datei, welche die Bibliothek enthält, imHTML-Dokument eingebunden ist, kann jQuery benutzt werden. Typischerweise wird durch den Zugriff auf Objekte mit der$-Funktion oder, um Kompatibilitätsproblemen mit anderen Bibliotheken aus dem Weg zu gehen und eine bessere Lesbarkeit zu erreichen, mit derjQuery-Funktion ein Objekt erzeugt. Dieses jQuery-Objekt kann dankFluent Interfaces an andere Funktionen übergeben werden.
Um mit mehreren Bibliotheken, die das $-Zeichen als Aufruf nutzen, arbeiten zu können, kann man dieses bei jQuery deaktivieren:
// gibt das $-Zeichen für andere Bibliotheken frei (kann auch mit der $-Notation aufgerufen werden)jQuery.noConflict();
Eine typische Manipulation von DOM-Elementen beginnt mit der$- oderjQuery-Funktion, die als Parameter einenCSS-ähnlichen Selektor erwartet. Zurückgegeben werden dann übereinstimmende DOM-Elemente, die dann mit jQuery-Methoden manipuliert werden können.Beispiel:
$("div.test, p.quote").addClass("blue").slideUp("slow");// oder auchjQuery("div.test, p.quote").addClass("blue").slideUp("slow");
In diesem Beispiel werden allediv-Elemente mit der Klassetest sowie allep-Elemente mit der Klassequote selektiert. Dann wird jedem der gefundenen Elemente die CSS-Klasseblue hinzugefügt. Abschließend wird das vertikale Zusammenklappen dieser Elemente animiert.
Zusätzlich existieren globale Hilfsfunktionen. Diese können mit Hilfe der$-/jQuery-Funktion aufgerufen werden. Im folgenden Beispiel-Script wird dieeach-Funktion demonstriert:
varmeinArray=[1,2,3];$.each(meinArray,function(){document.write(this+1);});
Dieses Beispiel schreibt234 in das Dokument.
Ajax-Funktionalitäten können mit Hilfe von$.ajax aufgerufen werden. Im unten stehenden Beispiel erfolgt eine asynchroneHTTP-POST-Anfrage an einPHP-Script. Ist der Aufruf erfolgreich, wird die Antwort des PHP-Scriptes mit einem Hinweisfenster ausgegeben.
$.ajax({type:"POST",url:"beispiel.php",data:"name=Mustermann&location=Berlin",}).done(function(response){alert("Daten gespeichert: "+response);});
Mit Hilfe von jQuery können den DOM-Elementen auch Events hinzugefügt werden:
$(function(){$("div.test a").on('click',function(){alert("Hello world!");});});
In diesem Beispiel wird nach dem Laden der DOM-Struktur jedema-Element, das sich innerhalb vondiv-Elementen mit der Klassetest befindet, einEvent-Listener zugewiesen, der beim Klick auf das Element eine Nachricht ausgibt. Der Vorteil dieser Umsetzung besteht darin, dass das Klickverhalten an einer zentralen Stelle gesteuert werden kann und nicht an dem HTML-Element selbst hinterlegt ist.
