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 in New York veröffentlicht und wird laufend weiterentwickelt.
Die jQuery-Basis besteht aus einer einzigen JavaScript-Datei, in der alle grundlegenden DOM-, Ereignis-, Effekt- und Ajax-Funktionen enthalten sind.Typischerweise wird durch den Zugriff auf Objekte mit der $-Funktion 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 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.
Tags: JQuery
