jQuery

jQuery
Entwickler	John Resig
Aktuelle Version	1.7 (3. November 2011)
Betriebssystem	plattformunabhängig
Programmier­sprache	JavaScript
Kategorie	Klassenbibliothek
Lizenz	Wahlweise: GPL oder MIT
www.jquery.com

jQuery ist eine freie, umfangreiche JavaScript-Klassenbibliothek, welche komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt. Die von John Resig entwickelte Klassenbibliothek wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt.

Verbreitung

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

jQuery ist die meistverwendete JavaScript-Bibliothek.^[7], fast 40 Prozent aller JavaScript-unterstützten Webseiten nutzen jQuery als Framework (Stand: April 2010)^[8].

Funktionen

jQuery beinhaltet 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
• Effekte und Animationen
• Ajax-Funktionalitäten
• Erweiterbarkeit durch zahlreiche freie Plug-ins, die bekannteste ist jQuery UI für Benutzeroberflächen

Benutzung

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

Um jQuery benutzen zu können, muss man es in eine HTML-Datei einbinden. 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 jQuery-Objekt erzeugt. Ein jQuery-Objekt kann durch 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 mit einem Selektor aufgerufen wird. Zurückgegeben werden dann 0 oder mehrere DOM-Elemente, die dann direkt oder über jQuery-Methoden manipuliert werden können. Beispiel:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");
// oder auch
jQuery("div.test").add("p.quote").addClass("blue").slideDown("slow");

In diesem Beispiel werden alle div-Elemente mit der Klasse test und alle p-Elemente mit der Klasse quote selektiert. Dann wird jedem der gefundenen Elemente die Klasse blue hinzugefügt und es wird die slideDown-Animation darauf ausgeführt.

Mit Hilfe der $- und add-Funktion werden die gewünschten Elemente selektiert. Mit der addClass-Funktion wird nun die CSS-Klasse den Elementen hinzugefügt. Die slideDown-Funktion führt dann die Animation aus, mit dem Parameter "slow" wird die Dauer der Animation festgelegt.

Zusätzlich existieren globale Hilfsfunktionen. Diese können mit Hilfe des $-/jQuery-Objekts aufgerufen werden. In folgendem Skript-Beispiel 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 oder auch jQuery.ajax aufgerufen werden, um Daten zu laden und Aktionen auszuführen, dabei werden die Parameter in einem JSON Objekt übergeben. Beispiel:

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

Dieses Beispiel ruft den URL some.php mit den Parametern name=John und location=Boston auf und gibt den Rückgabewert davon in einer Meldung aus.

Mithilfe von jQuery können den DOM-Elementen auch Aktionen hinzugefügt werden. Beispiel:

$(document).ready(function() {
  $("a").click(function() {
    alert("Hello world!");
  });
});

In diesem Beispiel wird nach Laden der DOM-Struktur jedem „a“-Element eine Funktion hinzugefügt, die beim Daraufklicken eine „Hello World!“-Messagebox ausgibt.

Der Vorteil dieser Umsetzung besteht darin, dass das Verhalten an einer zentralen Stelle gesteuert werden kann.

Etymologie

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^[9].

Literatur

• Bibeault, Bear; Katz, Yehuda: jQuery in Action. 2nd edition. (28. Mai 2010). Manning, ISBN 1-93518-232-3
• Chaffer, Jonathan; Swedberg, Karl: Learning jQuery. Packt Publishing 2007, ISBN 1-84719-250-5
• 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 (engl.)
• jQuery Mobile (Englisch) - Touchoptimiertes Framework für Smartphones und Handhelds
• Sammlung von Einführungen in jQuery (engl.)

Einzelnachweise

1. ↑ John Resig (28. September 2008): jQuery, Microsoft, and Nokia. jQuery. Abgerufen am 14. April 2011.
2. ↑ Guthrie Scott (28. September 2008): jQuery and Microsoft. Abgerufen am 29. September 2008.
3. ↑ http://download.microsoft.com/download/7/1/A/71A105A9-89D6-4201-9CC5-AD6A3B7E2F22/ASP_NET_4_and_Visual_Studio_2010_Web_Development_Overview.pdf
4. ↑ http://msdn.microsoft.com/en-us/magazine/ee336135.aspx#MainContent
5. ↑ Nutzung von jQuery in WordPress
6. ↑ www.mediawiki.org/wiki/JQuery jQuery im MediaWiki
7. ↑ Usage of javascript libraries for websites. Abgerufen am 7. Mai 2010.
8. ↑ Webentwicklung: jQuery ist der Quasi-Standard in Sachen JavaScript
9. ↑ Kommentar des Entwicklers John Resig