JavaScript-Programmierung von Kopf bis Fuß

624 Anhang

Eine sehr kurze Einführung in jQuery

1. jQuery

jQuery ist eine JavaScript-Bibliothek, die große Teile des JavaScript-Codes und der Syntax vereinfa-

chen soll, die für die Arbeit mit dem DOM und die Erstellung visueller Effekte auf Ihren Seiten nötig

sind. jQuery ist eine unglaublich beliebte und oft verwendete Bibliothek, die über ein Plug-in-Modell

erweiterbar ist.

Dabei gibt es nichts in jQuery, das Sie nicht auch direkt mit JavaScript erledigen könnten (schließlich

ist jQuery nur eine JavaScript-Bibliothek). Dennoch kann es die Codemenge, die Sie schreiben müssen,

deutlich reduzieren.

Die Beliebtheit von jQuery spricht für sich selbst, auch wenn es vielleicht etwas Eingewöhnungszeit

braucht, falls Sie es noch nicht kennen. Wir wollen uns ein paar Dinge ansehen, die Sie mit jQuery

machen können, und Sie ermuntern, bei Interesse genauer hinzusehen.

Erinnern Sie sich noch an die window.onload-Funktionen, die wir in diesem Buch geschrieben haben?

Das Verständnis

von jQuery gilt

heutzutage als

gute Fähigkeit

auf dem

Arbeitsmarkt

und um den Code

anderer Leute zu

verstehen.

window.onload = function() {

alert("Die Seite ist geladen!");

}

Und hier das Gleiche mit jQuery:

$(document).ready(function() {

alert("Die Seite ist geladen!");

});

Das können Sie sogar noch weiter verkürzen:

$(function() {

alert("Die Seite ist geladen!");

});

Wie bei unserer Version wird die Funktion

aufgerufen, sobald das Dokument bereit ist.

Das ist cool. Aber wie Sie sehen,

muss man sich zu Beginn erst daran

gewöhnen. Keine Sorge. Das wird Ihnen

schnell in Fleisch und Blut übergehen.

Und wie sieht es mit dem Zugriff auf DOM-Elemente aus? Genau da kann

jQuery so richtig punkten. Angenommen, Ihre Seite enthält ein <a>-Element mit

der ID »buynow«, dessen click-Event Sie einen onclick-Handler zuweisen wollen

(wie schon ein paarmal in diesem Buch). Dann können Sie Folgendes tun:

$(function() {

$("#buynow").click(function() {

alert("Ich will jetzt kaufen!");

});

});

Also, was ist hier los? Zuerst erstellen wir eine Funktion,

die aufgerufen wird, wenn die Seite geladen ist.

Danach holen wir uns das Element mit der ID

»buynow« (beachten Sie, dass jQuery die CSS-

Syntax für die Auswahl der Elemente benutzt).

Und dann rufen wir die jQuery-Methode click auf.

Das Ergebnis wird dem onclick-Handler zugewiesen.

Sie sind hier � 625

Was übrig bleibt

Das ist wirklich nur der Anfang. Sie können genauso einfach einen click-

Handler für alle <a>-Elemente der Seite einrichten.

$(function() {

$("a").click(function() {

alert("Ich will jetzt kaufen!");

});

});

Hierfür brauchen wir nur den

Namen des Tags zu verwenden.

Vergleichen Sie dies mit dem

Code, den Sie ohne jQuery, rein in

JavaScript, schreiben würden.

Oder wir können noch viel komplexere Dinge tun ...

$(function() {

$("#playlist > li").addClass("favorite");

});

... beispielsweise alle <li>-Elemente

finden, die Kindelemente des

Elements mit der ID playlist sind ...

... und dann allen Elementen die

Klasse »favorite« zuweisen.

Eigentlich ist das hier nur eine Aufwärmübung. jQuery ist

in der Lage, noch viel anspruchsvollere Dinge zu tun.

Und dann gibt es noch eine ganz andere Seite von jQuery, mit der Sie Ihre

Elemente mit den verschiedensten Animationseffekten versehen können, wie hier:

$(function() {

$("#specialoffer").click(function() {

$(this).fadeOut(800, function() {

$(this).fadeIn(400);

});

});

});

Hierdurch wird das Element mit der ID specialoffer

mit unterschiedlicher Geschwindigkeit aus- und dann

wieder eingeblendet.

Wie Sie sehen, sind mit jQuery sehr viele Dinge möglich. Dabei haben wir noch nicht einmal

darüber gesprochen, wie Sie jQuery für die Kommunikation mit Webservices verwenden können,

oder die Vielzahl von jQuery-Plug-ins erwähnt. Bei Interesse rufen Sie am besten die Seite

http://jquery.com/ auf und sehen sich die Anleitungen und die Dokumentation dort an.

Und werfen Sie auch einen Blick in

»jQuery - Von Kopf bis Fuß«!