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. 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-Systems und Webframeworks bereits mitgeliefert (z.B. WordPress , MediaWiki oder Drupal).

jQuery ist die meistverwendete JavaScript-Bibliothek, fast 40 Prozent aller JavaScript-unterstützten Webseiten nutzen jQuery als Framework (Stand: April 2010). Rund 57 Prozent der 10.000 meistbesuchten Webseiten nutzen jQuery.

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 Geschwindigkeit 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.

Der Name jQuery

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.

Quelle: Wikipedia (http://de.wikipedia.org/wiki/JQuery)