Man liest und hört ja viel über JavaScript Bibliotheken – aber welche ist nun toll und welche kann das was ich will? Ich möchte hier keine Übersicht über alle möglichen Bibliotheken geben sondern gezielt jQuery vorstellen. Vergleiche gibt es denke ich genug – „ask google“

jQuery hat sich mittlerweile zu einem richtigen Allrounder gemausert und spielt seine Stärken bei alltäglichen Aufgaben wie auch ausgefallenem UI-Zauber aus. Der wohl größte Vorteil von jQuery ist die Art und Weise wie auf Elemente im DOM zugegriffen wird. Jeder der CSS kennt wird sofort damit zurecht kommen.

„It’s all about the Benjamins!“

Das Dollarzeichen bildet in jQuery quasi den Zugang zur Bibliothek. Über die Funktion mit dem Namen „$“ wird jQuery aufgerufen und kann loslegen. Hier ein erstes Beispiel:

$('DIV.gaaanz_toll').css('background-color', 'red');

Es wird per jQuery das DIV-Element mit der CSS-Klasse „gaaanz_toll“ gesucht und die Methode css() darauf angewandt. Die Methode css() erwartet zwei Parameter: CSS-Eigenschaft und Wert den die Eigenschaft haben soll. Wenn nur der erste Parameter angegeben wird liefert jQuery den aktuellen Wert der Eigenschaft zurück.

Das ist direkt ein sehr einfaches Beispiel für die Art und Weise wie jQuery Element im Dokumentenbaum der HTML-Seite findet. Nämlich genauso wie es jeder durch CSS gewohnt ist!

Außerdem sieht man auch direkt einen weiteren Vorteil von jQuery, das sogenannte Chaining. Die $-Funktion liefert ein jQuery-Objekt das Herr über das DIV-Element mit der CSS-Klasse „gaaanz_toll“ ist. Nun wird die Methode css() mit dem Objekt über den „.“ (Punkt) „verkettet“. Schlußendlich wird die Methode css() des jQuery-Objektes das das DIV-Element vorhält aufgerufen.

Die Selektor-Engine von jQuery hat noch viele weitere Möglichkeiten Elemente zu suchen und zu erreichen. Hier nur ein paar Beispiele:

$('#test');                 //das Element mit id=“test“
$('DIV.test A');            //alle A-Elemente unterhalb von DIV class=“test“
$('DIV.text > A');          //alle A-Elemente direkt unter DIV class=“test“
$('INPUT[name=vorname]');   //alle Input-Elemente mit name=“vorname“

Denkt bitte daran, dass eine ID eines HTML-Elements immer eineindeutig sein muss. Nur Klassen dürfen mehr als einmal vergeben werden. Die Groß- und Kleinschreibung dient hier nur der besser Leßbarkeit.

“Welcome to the chaingang…”

Das schöne ist nun das auch nach dem Anwenden der css()-Methode immer noch das aktuelle jQuery-Objekt vorhanden ist, hier ein kurzes Beispiel:

$('DIV.gaaanz_toll').css('background-color', 'red').fadeOut('slow');

Es wird dem DIV-Element eine neue Hintergrundfarbe gegeben, genau wie im ersten Beispiel. Der Unterschied hier ist nun das „nachdem“ die Hintergrundfarbe geändert wurde das DIV-Element ausgeblendet wird – und zwar langsam.

jQuery beherscht in seiner Grundfunktionalität gewisse Animationsfunktionen. So können Elemente gezeigt und versteckt (show, hide), aus-/eingeblendet werden (fadeOut, fadeOut) und aus-/eingeschoben werden (slideIn, slideOut). Um weitere Funktionen zu nutzen kann man jQuery mit Plugins erweitern. Eines der größten ist hier sicherlich jQuery-UI mit dem alltägliche User-Interface Aufgaben im Handumdrehen gelöst werden können. Aber auch autocompleter, drag&drop und viele weitere Funktion lassen sich nachrüsten.

Das gibt jQuery im übrigen einen weiteren Vorteil: Es bleibt klein und hat nur die nötigsten, und damit keine überflüssigen, Funktionen an Board.

“Gimme more, Gimme more…”

Vergessen sollte man auch nicht die ausgefeilten AJAX Funktionen von jQuery. Nicht nur das sich get- wie auch post-Daten recht unkompliziert an die serverseitigen Scripte übergeben lassen, auch die Daten die zurück geliefert werden können automatisch nach zum Beispiel JSON geparsed werden und jQuery stellt diese dann als Javascript-Objekt direkt bereit.

Dieser Artikel sollte euch nur einmal einen kurzen Blick auf das geben was jQuery zu leisten vermag. Natürlich steht es jedem frei andere Bibliotheken zu nutzen – mir gefällt jQuery nunmal am besten

Hier noch ein paar Links zum Thema:

• jQuery Hauptseite mit Demos, etc.
• Die jQuery Dokumentation
• UserInterface Library für jQuery
• jQuery Plugin Repository
• jQuery and JavaScript Coding: Examples and Best Practices
• 50 Useful New jQuery Techniques and Tutorials