JQuery

jQuery
Entwickler:	John Resig
Aktuelle Version:	1.3.2 (2009-02-20)
Betriebssystem:	plattformunabhängig
Programmiersprache:	JavaScript
Kategorie:	Klassenbibliothek
Lizenz:	Wahlweise: GPL oder MIT
www.jquery.com

jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation und -Navigation zur Verfügung stellt. Das von John Resig entwickelte Framework wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt. Mittlerweile haben Microsoft und Nokia angekündigt, jQuery in ihren Produkten zu verwenden.^[1] Microsoft wird jQuery in die Entwicklungsumgebung Visual Studio^[2] in Verbindung mit dem ASP.NET MVC Framework und ASP.NET Ajax verwenden und Nokia wird es in ihrer Web-Runtime-Plattform integrieren.

Features

jQuery beinhaltet folgende Features:

• DOM-Selektierung und -Navigation (mit Unterstützung von CSS und einfachem XPath)
• DOM-Manipulation
• Erweitertes Event-System
• Hilfsfunktionen wie zum Beispiel die each-Funktion.
• Effekte und Animationen
• Ajax-Funktionalitäten
• Zahlreiche frei verfügbare Plugins
• Beliebige Erweiterbarkeit

Benutzung

Die jQuery-Basis besteht aus einer einzigen JavaScript-Datei in der alle grundlegenden DOM-, Event-, Effekt- und Ajax-Funktionen beinhaltet sind. Diese kann auf jeder Webseite mit folgendem Verweis inkludiert werden (wenn sich das Skript im selben Verzeichnis befindet):

<script type="text/javascript" src="jQuery.js"></script>

Typischerweise wird durch den Zugriff auf Objekte mit der $-Funktion und einem Selektor-Ausdruck ein jQuery-Objekt erzeugt, das an andere Funktionen durch Verkettung (= chaining) weitergegeben werden kann (im Stil der Fluent Interfaces nach Martin Fowler).

Eine typische Manipulation von DOM-Elementen beginnt mit der $-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");

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

Die Funktionen $ und add wählen die Objekte aus und die Funktionen addClass und slideDown verändern Aussehen und Verhalten der Objekte.

Es gibt auch noch globale Hilfsfunktionen. Diese können mit Hilfe des $-Objekts aufgerufen werden. In folgendem Skript-Beispiel wird die each-Funktion demonstriert:

$.each([1,2,3], function() {
  document.write(this + 1);
});

Dieses Beispiel schreibt 234 in das Dokument.

Ajax-Funktionalitäten können mit Hilfe von $.ajax aufgerufen werden, um Daten zu laden und Aktionen auszuführen. Beispiel:

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

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

Mithilfe von jQuery kann man den DOM-Elementen auch Verhalten hinzufügen. 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 darin ist, dass das Verhalten an einer zentralen Stelle verwaltet werden kann und nicht überall auf der ganzen HTML-Seite verteilt ist.

Weitere Informationen

Literatur

• Learning jQuery, ISBN 1847192505
• jQuery in Action, ISBN 1933988355
• Beginning JavaScript with DOM Scripting and Ajax, ISBN 1590596803
• Hacking del.icio.us, ISBN 0470037857
• Pro JavaScript Techniques, ISBN 1590597273
• AJAX and PHP: Building Responsive Web Applications, ISBN 1904811825
• Web Development Solutions, ISBN 1590598067

Weblinks

• Die jQuery-Webseite
• Download Aktuelle jQuery Version
• Tutorials (Deutsch)
• jQuery Dokumentation
• Cross-Framework Selector-Engine von jQuery in eigenem Open Source Projekt

Einzelnachweise

1. ↑ Resig, John. jQuery, Microsoft, and Nokia. jQuery. Abgerufen am 29. September 2008.
2. ↑ Scott, Guthrie (29. September 2008). jQuery and Microsoft. Abgerufen am 29. September 2008.