jQuery

jQuery
Entwickler	John Resig
Aktuelle Version	1.9.1 / 2.0.0 (18. April 2013)
Betriebssystem	plattformunabhängig
Programmier­sprache	JavaScript
Kategorie	Bibliothek
Lizenz	MIT
www.jquery.com

jQuery ist eine freie, umfangreiche JavaScript-Bibliothek, welche komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt. Die von John Resig entwickelte Bibliothek wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt. Derzeit werden mit 1.x und 2.x zwei unabhängige Versionsstränge gepflegt, welche sich hinsichtlich der Browserkompatibilität unterscheiden. Die Versionen 1.9 und 2.0 besitzen eine kompatible API.

Verbreitung

Im September 2008 haben Microsoft und Nokia angekündigt, jQuery in ihren Produkten zu verwenden. Microsoft hat jQuery in der Entwicklungsumgebung Visual Studio in Verbindung mit dem ASP.NET MVC Framework und ASP.NET Ajax integriert und Nokia plant es in seine Web-Runtime-Plattform zu integrieren. jQuery wird in vielen Content-Management-Systemen und Webframeworks bereits mitgeliefert (z. B. WordPress, MediaWiki oder Drupal).

jQuery ist die meistverwendete JavaScript-Bibliothek. Jede zweite Webseite und mehr als 60 Prozent der 10.000 meistbesuchten Webseiten nutzen jQuery (Stand: Februar 2013).

jQuery 2.0

Seit der Veröffentlichung der Alpha-Version 1.0 im Juni 2006 behielt das Framework die Hauptversion 1. Der seit April 2013 verfügbare Nachfolger jQuery 2.0 hat insbesondere aufgeräumten und wartbaren Quellcode zum Ziel. Auffallend ist dabei, dass das Framework ältere Browser wie den Internet Explorer 8 und seine Vorgänger nicht mehr unterstützt. Damit reagieren die Entwickler auf eine bessere Unterstützung der JavaScript-API moderner Webbrowser (zum Beispiel Zugriffe auf DOM-Knoten). Derzeit werden noch ältere Versionen anderer Browser unterstützt, z.B. Android 2.x. Bei sinkender Nutzerzahl jener Browser könnte aber auch jene Unterstützung demnächst abgekündigt werden. Der Hersteller gibt an, dass die 1.x-Version nicht gänzlich abgelöst, sondern parallel entwickelt werden soll, da ältere Browser teilweise noch hohe Verwendungszahlen besitzen.

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

Benutzung

Die jQuery-Basisbibliothek besteht aus einer JavaScript-Datei, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.

Nachdem die das Framework enthaltene Datei 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 werden die selektierten Elemente im Rahmen einer Animierung "nach oben geschoben" (Was die Objekte verschwinden lässt).

Zusätzlich existieren globale Hilfsfunktionen. Diese können mit Hilfe der $-/jQuery-Funktion aufgerufen werden. Im folgendem 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. Dabei werden die Parameter in einem JSON-Objekt übergeben. 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",
  success: function(response){
    alert( "Daten gespeichert: " + response );
  }
});

Mithilfe von jQuery können den DOM-Elementen auch Aktionen (englisch Events) hinzugefügt werden:

$(document).ready(function() {
  $("div.test a").on('click', function() {
    alert("Hello world!");
  });
});

In diesem Beispiel wird nach dem Laden der DOM-Struktur jedem „a“-Element (innerhalb von div-Elementen mit der Klasse "test") ein Event Listener zugewiesen, der beim Daraufklicken eine Nachricht ausgibt. Der Vorteil dieser Umsetzung besteht darin, dass das Verhalten an einer zentralen Stelle gesteuert werden kann.

Bezeichnung

Ursprünglich sollte die Bibliothek jSelect genannt werden. Da die Domain für diesen Namen schon vergeben war, entschied sich Entwickler John Resig für den Namen jQuery.

Siehe auch

• jQuery UI

Literatur

• Bibeault, Bear; Katz, Yehuda: jQuery in Action. 2nd edition. (28. Mai 2010). Manning, ISBN 1-93518-232-3.
• Chaffer, Jonathan; Swedberg, Karl: jQuery lernen und einsetzen. dpunkt.verlag 2012, ISBN 978-3-89864-786-1.
• Darie, Cristian: AJAX and PHP: Building Responsive Web Applications. Packt Publishing 2006, ISBN 1-904811-82-5.
• Heilmann, Christian: Beginning JavaScript with DOM Scripting and Ajax. Apress 2006, ISBN 1-59059-680-3.
• Heilmann, Christian: Web Development Solutions. Apress 2007, ISBN 1-59059-806-7.
• Resig, John: Pro JavaScript Techniques. Apress 2006, ISBN 1-59059-727-3.
• Steyer, Ralph: jQuery: Das neue JavaScript-Framework für interaktives Design. Addison-Wesley 2009, ISBN 978-3-8273-2887-8.

Weblinks

• Offizielle Website (englisch)
• Offizielle Dokumentation (englisch)
• Deutsche Tutorialübersicht
• jQuery Mobile – UI-Framework für Smartphones und Handhelds (englisch)