imported>Björn König: Veraltete Vorabversion ausblenden

2026-03-31T21:42:11Z

Veraltete Vorabversion ausblenden

Neue Seite

{{SEITENTITEL:jQuery}}
{{Infobox Software
|Name = jQuery
|Logo = [[Datei:JQuery-Logo.svg|230px|Logo von jQuery]]
|Maintainer =
|Hersteller = jQuery Team
|Erscheinungsjahr = August 2005<ref>[https://jquery.org/history/ ''History jquery''] Geschichte und Entstehung von jquery.</ref>
|AktuelleVersion = 
|AktuelleVersionFreigabeDatum = 
|AktuelleVorabVersion = KEINE_ANGABE
|Programmiersprache = [[JavaScript]]
|Lizenz = [[MIT-Lizenz|MIT]]
|AktuelleVorabVersionFreigabeDatum =
|Betriebssystem = [[Plattformunabhängigkeit|plattformunabhängig]]
|Kategorie = [[Programmbibliothek|Bibliothek]]
|Deutsch =
|Website = [https://jquery.com/ jquery.com]
|Dateien =
|Screenshot =
|Beschreibung = [[JavaScript]]-[[Framework]]
}}

'''jQuery''' (auch ''jQuery Core'') ist eine [[Freie Software|freie]] [[JavaScript]]-[[Programmbibliothek|Bibliothek]], die Funktionen zur [[Document Object Model|DOM]]-Navigation und -Manipulation zur Verfügung stellt.

jQuery ist die meistverwendete JavaScript-Bibliothek.<ref name="W3Techs">{{Internetquelle |url=https://w3techs.com/technologies/overview/javascript_library |titel=Usage statistics of JavaScript libraries for websites |werk=W3Techs Web Technology Surveys |hrsg=Q-Success |sprache=en |abruf=2022-09-21}}</ref> 77 % aller Websites<ref name="W3Techs" /> und 69 % der 10.000 meistbesuchten Websites<ref>{{Internetquelle |url=https://trends.builtwith.com/javascript/jQuery |titel=jQuery Usage Statistics |titelerg=Websites using jQuery |hrsg=BuiltWith.com |sprache=en |offline=1 |archiv-url=https://web.archive.org/web/20181225092702/https://trends.builtwith.com/javascript/JQuery |archiv-datum=2018-12-25 |archiv-bot=2022-11-19 15:26:30 InternetArchiveBot |abruf=2018-01-31}}</ref> nutzen jQuery (Stand: September 2022). Die Bibliothek wird in vielen [[Content-Management-System]]en und Webframeworks bereits mitgeliefert, zum Beispiel in
[[Joomla]]<ref>{{Internetquelle |url=https://docs.joomla.org/J3.x:Javascript_Frameworks |titel=Joomla! Documentation – Javascript Frameworks |abruf=2015-05-14}}</ref>, [[WordPress]]<ref>{{Internetquelle |url=https://developer.wordpress.org/reference/functions/wp_enqueue_script/#defaults |titel=Nutzung von jQuery in WordPress |abruf=2013-03-16}}</ref>, [[MediaWiki]]<ref>{{Internetquelle |url=https://www.mediawiki.org/wiki/JQuery |titel=jQuery im MediaWiki |abruf=2013-03-16}}</ref> oder [[Drupal]]<ref>{{Internetquelle |url=https://www.drupal.org/node/171213 |titel=Working with JavaScript and jQuery |hrsg=Drupal |abruf=2013-03-16}}</ref>.

== Geschichte ==
Ursprünglich sollte die Bibliothek ''jSelect'' genannt werden. Da die [[Domain (Internet)|Domain]] für diesen Namen schon vergeben war, entschied sich der Entwickler [[John Resig]] für den Namen jQuery.<ref>{{Internetquelle |autor=John Resig |url=http://ejohn.org/blog/barcampnyc-wrap-up/ |titel=BarCampNYC Wrap-up |datum=2006-01-16 |abruf=2013-03-16 |kommentar=Kommentar des Entwicklers John Resig}}</ref> Die von John Resig entwickelte Bibliothek wurde im Januar 2006 auf dem [[Barcamp]] (NYC) in New York veröffentlicht. Inzwischen wird die Bibliothek jQuery von der unabhängigen ''jQuery Foundation'' fortlaufend weiterentwickelt und um weitere Bibliotheken ergänzt mit [[JQuery UI]], [[jQuery Mobile]], [[Sizzle Selector Engine]] und [[QUnit]]. 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.<ref>Vgl. Liste Team-Mitglieder und Status unter [https://jquery.org/team/ jquery.org/team] (Abgerufen am 16. Februar 2015)</ref>

== Parallele Versionsstränge ==
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 kompatible [[Programmierschnittstelle|API]]. Seit dem 9. Juni 2016 mit der Veröffentlichung der Version 3.0 wurde ein neuer Versionsstrang eingeführt. Dieser ist im Großteil ebenfalls [[Kompatibilität (Technik)#Abwärtskompatibilität|rückwärtskompatibel]].

Der Versionsstrang 1.x begann im Juni 2006 als Version 1.0 als [[Entwicklungsstadium (Software)#Alpha-Version|Alpha-Version]].<ref>[https://blog.jquery.com/2006/06/30/jquery-10-alpha-release/ jQuery 1.0 Alpha Release] Ankündigung der Alphaversion 1.0 (englisch), abgerufen am 2. April 2013.</ref> Die erste Version des Versionsstrangs 2.x wurde im April 2013 unter der Bezeichnung „jQuery 2.0“ veröffentlicht. Aufgrund besserer JavaScript-Unterstützung moderner [[Webbrowser]] (zum Beispiel Zugriffe auf [[Document Object Model|DOM-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 den [[Internet Explorer]] bis einschließlich Version 8 (und der ''Kompatibilitä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.<ref name="3.0-release">{{Internetquelle |url=https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ |titel=jQuery 3.0 Final Released! |titelerg=im eigenen Weblog |datum=2016-06-09 |sprache=en |abruf=2017-03-11}}</ref><ref>[https://blog.jquery.com/2013/05/24/jquery-1-10-0-and-2-0-1-released/ jQuery 1.10.0 and 2.0.1 Released] abgerufen am 29. November 2021 (englisch).</ref> Die Versionslinien 1.x und 2.x werden weiterhin mit sicherheitsrelevanten [[Patch (Software)|Patches]] versorgt.<ref name="3.0-release" />
Der Versionsstrang 3.x verzichtet gänzlich auf die Unterstützung von [[Internet Explorer|Internet-Explorer]]-spezifischen Eigenheiten. Unter anderem wurde mit Version 3.0 die API für <code>jQuery.deferred</code> geändert und es wurden veraltete [[Beobachter (Entwurfsmuster)|Event-Listener]], namentlich <code>.load</code>, <code>.unload</code> und <code>.error</code>, entfernt.<ref name="3.0-release" />

== Funktionen ==
jQuery bietet JavaScript-Entwicklern folgende Funktionen:
* Elementselektion im Document Object Model über die ''[[Sizzle Selector Engine]]'', die weitgehend den [[Cascading Style Sheets|CSS]]-3-Selektoren entspricht
* [[Document Object Model|Document-Object-Model]]-Manipulation
* Erweitertes [[Ereignis (Programmierung)|Event]]-System
* Hilfsfunktionen wie zum Beispiel die <code>each</code>-Funktion
* Animationen und Effekte
* [[Ajax (Programmierung)|Ajax]]-Funktionalitäten
* Erweiterbarkeit durch zahlreiche freie [[Plug-in]]s, etwa [[jQuery UI]] für die einheitliche Gestaltung von Benutzeroberflächen oder DataTables zur Anzeige tabellarischer Daten<ref>[https://datatables.net/ DataTables Table plug-in for jQuery]</ref>

== Benutzung ==
Die 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, im [[HTML-Dokument]] eingebunden ist, kann jQuery benutzt werden. Typischerweise wird durch den Zugriff auf Objekte mit der <code>$</code>-Funktion oder, um Kompatibilitätsproblemen mit anderen Bibliotheken aus dem Weg zu gehen und eine bessere Lesbarkeit zu erreichen, mit der <code>jQuery</code>-Funktion ein Objekt erzeugt. Dieses jQuery-Objekt kann dank ''[[Fluent Interface]]s'' 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:
<syntaxhighlight lang="javascript">
// gibt das $-Zeichen für andere Bibliotheken frei (kann auch mit der $-Notation aufgerufen werden)
jQuery.noConflict();
</syntaxhighlight>

Eine typische Manipulation von DOM-Elementen beginnt mit der <code>$</code>- oder <code>jQuery</code>-Funktion, die als Parameter einen [[Cascading Style Sheets|CSS]]-ähnlichen Selektor erwartet. Zurückgegeben werden dann übereinstimmende DOM-Elemente, die dann mit jQuery-Methoden manipuliert werden können.
Beispiel:
<syntaxhighlight lang="javascript">
$("div.test, p.quote")
.addClass("blue")
.slideUp("slow");

// oder auch
jQuery("div.test, p.quote")
.addClass("blue")
.slideUp("slow");
</syntaxhighlight>
In diesem Beispiel werden alle <code>div</code>-Elemente mit der Klasse <code>test</code> sowie alle <code>p</code>-Elemente mit der Klasse <code>quote</code> selektiert. Dann wird jedem der gefundenen Elemente die CSS-Klasse <code>blue</code> hinzugefügt. Abschließend wird das vertikale Zusammenklappen dieser Elemente animiert.

Zusätzlich existieren globale Hilfsfunktionen. Diese können mit Hilfe der <code>$</code>-/<code>jQuery</code>-Funktion aufgerufen werden. Im folgenden Beispiel-Script wird die <code>each</code>-Funktion demonstriert:
<syntaxhighlight lang="javascript">
var meinArray = [1, 2, 3];
$.each(meinArray, function() {
document.write(this + 1);
});
</syntaxhighlight>
Dieses Beispiel schreibt <code>234</code> in das Dokument.

Ajax-Funktionalitäten können mit Hilfe von <code>$.ajax</code> aufgerufen werden. Im unten stehenden Beispiel erfolgt eine asynchrone [[Hypertext Transfer Protocol|HTTP-POST]]-Anfrage an ein [[PHP]]-Script. Ist der Aufruf erfolgreich, wird die Antwort des PHP-Scriptes mit einem Hinweisfenster ausgegeben.
<syntaxhighlight lang="javascript">
$.ajax({
type: "POST",
url: "beispiel.php",
data: "name=Mustermann&location=Berlin",
}).done(function(response){
alert("Daten gespeichert: " + response);
});
</syntaxhighlight>

Mit Hilfe von jQuery können den DOM-Elementen auch Events hinzugefügt werden:
<syntaxhighlight lang="javascript">
$(function() {
$("div.test a").on('click', function() {
alert("Hello world!");
});
});
</syntaxhighlight>
In diesem Beispiel wird nach dem Laden der DOM-Struktur jedem <code>a</code>-Element, das sich innerhalb von <code>div</code>-Elementen mit der Klasse <code>test</code> befindet, ein [[Beobachter (Entwurfsmuster)|Event-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.

== Siehe auch ==
* [[jQuery UI]]
* [[JQuery Mobile|jQuery mobile]]

== Literatur ==
* Bear Bibeault, Yehuda Katz: ''jQuery in Action''. 2nd edition. Manning, 2010, ISBN 978-1-935182-32-0.
* Jonathan Chaffer, Karl Swedberg: ''jQuery lernen und einsetzen''. dpunkt.verlag, 2012, ISBN 978-3-89864-786-1.
* Christian Darie: ''AJAX and PHP: Building Responsive Web Applications''. Packt Publishing, 2006, ISBN 1-904811-82-5.
* Christian Heilmann: ''Beginning JavaScript with DOM Scripting and Ajax''. Apress, 2006, ISBN 1-59059-680-3.
* Christian Heilmann: ''Web Development Solutions''. Apress, 2007, ISBN 978-1-59059-806-1.
* John Resig: ''Pro JavaScript Techniques''. Apress, 2006, ISBN 1-59059-727-3.
* Ralph Steyer: ''jQuery: Das neue JavaScript-Framework für interaktives Design''. Addison-Wesley, 2009, ISBN 978-3-8273-2887-8.
* {{Literatur
|Autor=Ralph Steyer
|Titel=jQuery – Das universelle JavaScript-Framework für das interaktive Web und mobile Anwendungen
|Auflage=1.
|Verlag=Hanser
|Ort=München
|Datum=2014
|ISBN=978-3-446-43941-2
|Sprache=de
|Online=[http://www.hanser-fachbuch.de/buch/jQuery/9783446439412 hanser-fachbuch.de]}}

== Weblinks ==
* [https://jquery.com/ Offizielle Website] (englisch)
* [https://api.jquery.com/ Offizielle Dokumentation] (englisch)
* [https://jquerymobile.com/ jQuery Mobile] – UI-Framework für Smartphones und Handhelds (englisch)

== Einzelnachweise ==
<references responsive />

{{Normdaten|TYP=s|GND=7681087-2}}
[[Kategorie:JavaScript-Bibliothek]]

JQuery - Versionsgeschichte

imported>Björn König: Veraltete Vorabversion ausblenden