JQuery
jQuery
| |
---|---|
![]() | |
Basisdaten
| |
Entwickler | jQuery Team |
Erscheinungsjahr | August 2005[1] |
Aktuelle Version | 3.7.1[2] (28. August 2023) |
Betriebssystem | plattformunabhängig |
Programmiersprache | JavaScript |
Kategorie | Bibliothek |
Lizenz | MIT |
jquery.com |
jQuery (auch jQuery Core) ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt.
jQuery ist die meistverwendete JavaScript-Bibliothek.[3] 77 % aller Websites[3] und 69 % der 10.000 meistbesuchten Websites[4] nutzen jQuery (Stand: September 2022). Die Bibliothek wird in vielen Content-Management-Systemen und Webframeworks bereits mitgeliefert, zum Beispiel in Joomla[5], WordPress[6], MediaWiki[7] oder Drupal[8].
Geschichte
Ursprünglich sollte die Bibliothek jSelect genannt werden. Da die Domain für diesen Namen schon vergeben war, entschied sich der Entwickler John Resig für den Namen jQuery.[9] Die von John Resig entwickelte Bibliothek wurde im Januar 2006 auf dem Barcamp (NYC) in New York veröffentlicht. Zwischenzeitlich 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 inzwischen aus der aktiven Entwicklungsarbeit zurückgezogen und diese an das jQuery Team übergeben, welchem er als Ehrenmitglied weiterhin angehört.[10]
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 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 rückwärtskompatibel.
Der Versionsstrang 1.x begann im Juni 2006 als Version 1.0 als Alpha-Version.[11] 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 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 besitzen, wurde die 1.x-Versionslinie aus Kompatibilitätsgründen bis zum Erscheinen der Version 3.0 am 9. Juni 2016 gewartet und aktualisiert.[12][13] Die Versionslinie 1.x und 2.x werden weiterhin mit sicherheitsrelevanten Patches versorgt.[12] Der Versionsstrang 3.x verzichtet jedoch gänzlich auf die Unterstützung von Internet-Explorer-spezifischen Eigenheiten. Unter anderem wurde mit Version 3.0 die API für jQuery.deferred
geändert und es wurden veraltete Event-Listener, namentlich .load
, .unload
und .error
, entfernt.[12]
Funktionen
jQuery bietet JavaScript-Entwicklern folgende Funktionen:
- Elementselektion im Document Object Model über die Sizzle Selector Engine, die weitgehend den CSS-3-Selektoren entspricht
- Document-Object-Model-Manipulation
- Erweitertes Event-System
- Hilfsfunktionen wie zum Beispiel die
each
-Funktion - Animationen und Effekte
- Ajax-Funktionalitäten
- Erweiterbarkeit durch zahlreiche freie Plug-ins, etwa jQuery UI für die einheitliche Gestaltung von Benutzeroberflächen oder DataTables zur Anzeige tabellarischer Daten[14]
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 $
-Funktion oder, um Kompatibilitätsproblemen mit anderen Bibliotheken aus dem Weg zu gehen und eine bessere Lesbarkeit zu erreichen, mit der jQuery
-Funktion ein Objekt erzeugt. Dieses jQuery-Objekt kann dank Fluent 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 $
- oder jQuery
-Funktion, die als Parameter einen CSS-ä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 auch jQuery("div.test, p.quote") .addClass("blue") .slideUp("slow");
In diesem Beispiel werden alle div
-Elemente mit der Klasse test
sowie alle p
-Elemente mit der Klasse quote
selektiert. Dann wird jedem der gefundenen Elemente die CSS-Klasse blue
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 die each
-Funktion demonstriert:
var meinArray = [1, 2, 3]; $.each(meinArray, function() { document.write(this + 1); });
Dieses Beispiel schreibt 234
in das Dokument.
Ajax-Funktionalitäten können mit Hilfe von $.ajax
aufgerufen werden. Im unten stehenden Beispiel erfolgt eine asynchrone HTTP-POST-Anfrage an ein PHP-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 jedem „a“-Element, das sich innerhalb von div
-Elementen mit der Klasse „test“ befindet, ein 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
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.
- Ralph Steyer: jQuery - Das universelle JavaScript-Framework für das interaktive Web und mobile Anwendungen. 1. Auflage. Hanser, München 2014, ISBN 978-3-446-43941-2 (hanser-fachbuch.de).
Weblinks
- Offizielle Website (englisch)
- Offizielle Dokumentation (englisch)
- jQuery Mobile – UI-Framework für Smartphones und Handhelds (englisch)
Einzelnachweise
- ↑ History jquery Geschichte und Entstehung von jquery.
- ↑ jQuery 3.7.1 Released: Reliable Table Row Dimensions. 28. August 2023.
- ↑ a b Usage statistics of JavaScript libraries for websites. In: W3Techs Web Technology Surveys. Q-Success, abgerufen am 21. September 2022 (englisch).
- ↑ jQuery Usage Statistics. Websites using jQuery. BuiltWith.com, archiviert vom Original (nicht mehr online verfügbar) am 25. Dezember 2018; abgerufen am 31. Januar 2018 (englisch). Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/trends.builtwith.com
- ↑ Joomla! Documentation - Javascript Frameworks. Abgerufen am 14. Mai 2015.
- ↑ Nutzung von jQuery in WordPress. Abgerufen am 16. März 2013.
- ↑ jQuery im MediaWiki. Abgerufen am 16. März 2013.
- ↑ Working with JavaScript and jQuery. Drupal, abgerufen am 16. März 2013.
- ↑ John Resig: BarCampNYC Wrap-up. 16. Januar 2006, abgerufen am 16. März 2013 (Kommentar des Entwicklers John Resig).
- ↑ Vgl. Liste Team-Mitglieder und Status unter jquery.org/team (Abgerufen am 16. Februar 2015)
- ↑ jQuery 1.0 Alpha Release Ankündigung der Alphaversion 1.0 (englisch), abgerufen am 2. April 2013.
- ↑ a b c jQuery 3.0 Final Released! im eigenen Weblog. 9. Juni 2016, abgerufen am 11. März 2017 (englisch).
- ↑ jQuery 1.10.0 and 2.0.1 Released abgerufen am 29. November 2021 (englisch).
- ↑ DataTables Table plug-in for jQuery