Schulung jQuery JavaScript-Bibliothek

Kurs: jQuery JavaScript-Bibliothek (http://tutego.de/g/JQUERY/)
Autor: Boris Schäling

Inhaltsverzeichnis

• 1. Allgemeines
• 2. Architektur
• 3. jQuery und Prototype
• 4. Selektoren
• 5. Navigation
• 6. Manipulatoren
• 7. Positionierung
• 8. Effekte
• 9. Ereignisse
• 10. Ajax
• 11. Statische Funktionen
• 12. Plug-Ins
• 13. jQuery UI

1. Allgemeines. Kein Framework für alles, sondern Konzentration aufs
Wesentliche

jQuery ist eine Javascript-Bibliothek, die eine einfache und browserunabhängige Schnittstelle
bietet, um auf HTML-Elemente einer Webseite zuzugreifen und sie zu bearbeiten. Auch
wenn es sich hierbei um eine junge Bibliothek handelt, deren erste Version 2006
veröffentlicht wurde, ist jQuery heute eine der populärsten Javascript-Bibliotheken. So sind
nicht nur viele Entwickler von anderen Bibliotheken wie beispielsweise Prototype zu jQuery
gewechselt. Sogar Unternehmen wie Microsoft haben angekündigt, jQuery explizit zu
unterstützen.

Die Gründe für die enorme Popularität von jQuery sind vielfältig:

• jQuery konzentriert sich auf wenige in der Praxis wichtige Funktionen, die besonders
intensiv unterstützt werden. So steht zum Beispiel eine einfache und gleichzeitig
mächtige Funktion zur Verfügung, um beliebige HTML-Elemente auszuwählen -
etwas, was in fast jeder Webseite, in der Javascript eingesetzt wird, notwendig ist.
• jQuery definiert nur ein einziges Objekt, das alle Funktionen zur Verfügung stellt, die
von jQuery angeboten werden. Es werden keine anderen Objekte, die von Javascript
oder dem Browser zur Verfügung gestellt werden, in irgendeiner Form erweitert oder
verändert. jQuery-Funktionen und Browserobjekte sind somit klar getrennt. Das hilft
auch, um schnell zu erkennen, welcher Code auf jQuery zugreift und welcher nicht.
• jQuery unterstützt die funktionale Programmierung, mit der Javascript-Entwickler im
Allgemeinen mehr vertraut sind als mit der Objektorientierung. Sie bietet sich vor
allem auch deswegen an, weil das Auswählen und Bearbeiten von HTML-Elementen
mehrere Schritte sind, die sich ideal als verkettete Funktionsaufrufe darstellen lassen
- etwas, was jQuery explizit unterstützt.

jQuery unterstützt alle gängigen Browser und aktuelle Browserversionen. Dies wird unter
anderem über eine Testsuite sichergestellt, die auf QUnit basiert - einem Spin-Off von
jQuery, das sich zu einem eigenständigen Framework zum Testen von Javascript-Code
gemausert hat. Die Testsuite von jQuery kann online im Browser ausgeführt werden.

jQuery wird in einer einzigen Datei zur Verfügung gestellt, die von der jQuery-Homepage
heruntergeladen werden kann. Genaugenommen stehen zwei Dateien zur Auswahl: Die
Datei, die zum Einsatz in Produktivsystemen empfohlen wird, enthält Code in einer stark
komprimierten Variante. Das verkürzt die Ladezeiten der Bibliothek, macht es aber praktisch
unmöglich, die Bibliothek zu debuggen. Für Entwickler wird daher auch eine nicht-
komprimierte Variante der Bibliothek angeboten.

Egal, ob Sie die komprimierte oder nicht-komprimierte Variante von jQuery verwenden - die
Einbindung in Webseiten erfolgt wie bei anderen Javascript-Dateien auch über den
<script>-Tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery sample</title>
<script type="text/javascript"
src="../../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Javascript-Code, der auf jQuery zugreifen kann
</script>
</head>
<body>
<p>jQuery sample</p>
</body>
</html>

In diesem Artikel lernen Sie die verschiedenen Bestandteile von jQuery kennen. Dazu
gehören ganz wesentlich Funktionen, um HTML-Elemente auszuwählen und zu bearbeiten.
jQuery stellt darüberhinaus jedoch auch ein Minimum an Funktionen zur Verfügung, wie sie
häufig in Webanwendungen benötigt werden. Dazu zählen zum Beispiel Funktionen zum
Reagieren auf Ereignisse und zum Zugriff auf Serverressourcen mit Ajax.

Weil sich jQuery auf wesentliche Funktionen konzentriert und nicht versucht, eine neue
Schnittstelle über sämtliche in Browsern existierende Funktionen zu stülpen, ist der
Funktionsumfang von jQuery limitiert. Um eine weitergehende Unterstützung von
Javascript-Entwicklern zu ermöglichen, bietet jQuery jedoch Schnittstellen an, über die die
Bibliothek um neue Funktionen erweitert werden kann. Dies geschieht über sogenannte
Plug-Ins, die bereits zahlreich entwickelt worden sind und über die Sie sich im Plug-In-
Repository einen Überblick verschaffen können.

Aufbauend auf jQuery werden außerdem sogenannte Widgets angeboten. Dabei handelt es
sich um Komponenten für grafische Benutzeroberflächen. Diese Komponenten werden in
einem Paket zur Verfügung gestellt, das jQuery UI genannt wird. Auch wenn jQuery UI auf
jQuery basiert, handelt es sich um zwei unterschiedliche Projekte, für die sich zwei
unterschiedliche Teams verantwortlich zeichnen. jQuery UI verwendet außerdem eine

andere selbst entwickelte Schnittstelle für Widgets. Diese Widgets basieren also nicht wie
Plug-Ins auf der Schnittstelle, die von der jQuery-Bibliothek angeboten wird.

2. Architektur. Ein Objekt, viele nützliche Funktionen

jQuery erweitert das Objektmodell des Browsers um genau eine einzige Funktion namens
jQuery(). jQuery fügt diese Funktion dem window-Objekt hinzu, das - auch wenn es keinen
entsprechenden Standard gibt, der das vorschreibt - von allen gängigen Browsern angeboten
wird. Da die Funktion über das window-Objekt zur Verfügung steht, kann sie wie eine globale
Funktion aufgerufen werden, ohne window vor dem Funktionsnamen angeben zu müssen.
Auch das ist etwas, was alle gängigen Browser so unterstützen.

window.jQuery();
jQuery();
window.$();
$();

Die Funktion jQuery() ist auch unter anderem Namen verfügbar. So können Sie sie auch
über $() aufrufen. Auch wenn das Dollarzeichen gewöhnungsbedürftig aussieht, wird diese
Schreibweise oft vorgezogen. Zum einen ist der Funktionsname kürzer - es muss also
weniger getippt werden. Zum anderen fällt der ungewöhnliche Funktionsname auf. Das hilft,
um in größeren Programmen schnell zu erkennen, wo auf jQuery zugegriffen wird.
Letztendlich bleibt es aber Ihnen überlassen, ob Sie lieber jQuery() oder $() schreiben. Da
Javascript-Entwickler in der Praxis die Dollar-Schreibweise vorziehen, wird in diesem Artikel
ebenfalls $() verwendet.

Der Aufruf von $() bewirkt, dass ein jQuery-Objekt zurückgegeben wird. Dieses jQuery-
Objekt können Sie sich als ein Array vorstellen, das beliebig viele Browserobjekte enthält, die
HTML-Elemente repräsentieren. Über das jQuery-Objekt werden zahlreiche Funktionen zur
Verfügung gestellt, über die Sie sämtliche Browserobjekte bearbeiten können, die das
entsprechende jQuery-Objekt im Moment enthält.

Sie müssen $() einen String übergeben, um HTML-Elemente auszuwählen. Dieser String
wird als Selektor bezeichnet. Was Selektoren genau sind und wie sie aussehen, lernen Sie
später in diesem Artikel kennen. Rufen Sie jedoch $() ohne einen Parameter auf, wird ein
jQuery-Objekt zurückgegeben, das ein Browserobjekt enthält, das die aktuelle Webseite
repräsentiert. Dieses Browserobjekt ist in allen gängigen Browsern auch als document-
Objekt bekannt.

var jDocument = $();

Es macht nicht viel Sinn, $() ohne Selektor aufzurufen, da Sie über document direkten
Zugriff auf das Browserobjekt haben, das die Webseite repräsentiert. Entscheidend für das
Verständnis ist jedoch, dass $() keine Browserobjekte wie document zurückgibt, sondern
immer nur ein jQuery-Objekt, das seinerseits Browserobjekte enthalten kann. Sie können
also nicht auf jDocument direkt zugreifen, um zum Beispiel die Dokumenttyp-Deklaration zu
lesen, wie sie vom W3C in der DOM-Spezifikation definiert ist. Sie müssen stattdessen auf
das document-Objekt zugreifen, das sich im jQuery-Objekt jDocument befindet.

var jDocument = $();

if (jDocument.size() == 1) {
var doc = jDocument.get(0);
alert(doc.doctype.name);
}

Weil ein jQuery-Objekt ähnlich einem Array beliebig viele Browserobjekte enthalten kann,
bietet es zwei Funktion size() und get() an: Über size() kann die Anzahl der
Browserobjekte im jQuery-Objekt ermittelt werden. Über get(), das einen Index als
Parameter erwartet, kann auf ein bestimmtes Browserobjekt im jQuery-Objekt zugegriffen
werden. So wird im obigen Beispiel der Doctype-Name ausgegeben - etwas, was genauso gut
mit alert(document.doctype.name) hätte gemacht werden können.

Beachten Sie, dass doctype eine in DOM 1 standardisierte Eigenschaften des Dokuments ist
und nicht von jQuery bereitgestellt wird. Nur Browser, die diese Eigenschaft unterstützen,
geben den Namen des Dokumenttypen aus.

Die wahre Stärke von jQuery ist es, beliebige Browserobjekte mit Hilfe des Selektors
auszuwählen. So kann zum Beispiel auf alle Paragraphen in einer Webseite zugegriffen
werden, um jeden einzelnen mit einem <div>-Element zu umgeben und ihre Farbe zu
ändern.

$('p').wrap(document.createElement('div')).css('color', 'blue');

Weil die meisten Funktionen das jQuery-Objekt zurückgeben, für das sie aufgerufen werden,
können Funktionsaufrufe so wie oben verkettet werden: Zuerst werden alle gefundenen
HTML-Elemente vom Typ <p> jeweils mit einem <div>-Element umgeben. Anschließend
wird die Schriftfarbe der Paragraphen - nicht die der <div>-Elemente - auf Blau gesetzt.

Beachten Sie, dass jQuery nicht versucht, bestehende Browserobjekte zu ersetzen oder zu
ändern. Auch wird nicht versucht, standardisierte Funktionen wie beispielsweise
createElement() zu ersetzen. jQuery ist ein Hilfsmittel, um bestimmte Aufgaben schneller
zu erledigen. Dabei wird aber mit bestehenden Browserobjekten und Funktionen kooperiert.

Da die Funktion $() verwendet wird, um Bestandteile einer Webseite auszuwählen und zu
bearbeiten, muss oft sichergestellt werden, dass der Zugriff erst dann erfolgt, wenn die
Webseite komplett geladen wurde. jQuery unterstützt Sie dabei: Wenn Sie keinen Selektor,
sondern eine Funktion an $() übergeben, ruft jQuery diese Funktion erst dann auf, wenn
der Browser die Webseite vollständig geladen hat. So können Sie in dieser Funktion
gefahrlos auf sämtliche Bestandteile einer Webseite zugreifen.

<html>
<head>
$(function() {
var jParas = $('p');
if (jParas.size() == 1) {
var para = jParas.get(0);
alert(para.innerHTML);

}
});
</script>
</head>
<body>
</body>
</html>

Im obigen Beispiel sehen Sie den typischen Aufbau einer Webseite, die jQuery verwendet.
Bevor auf das <p>-Element der Webseite zugegriffen werden kann, soll sichergestellt
werden, dass die Webseite komplett geladen wurde. Indem der Zugriff innerhalb der
anonymen Funktion erfolgt, die als Parameter an $() übergeben wird, kann es nicht zu
Problemen kommen.

Im obigen Beispiel wird auf den einzigen Paragraphen auf der Webseite zugegriffen und
jQuery sample ausgegeben. Dabei wird das Browserobjekt, das den Paragraphen
repräsentiert, aus dem jQuery-Objekt entnommen, um dann über die nicht-standardisierte,
aber von allen gängigen Browser unterstützte Eigenschaft innerHTML den Text im
Paragraphen auszugeben.

Neben Funktionen, deren Aufruf nur dann Sinn macht, wenn sich im jQuery-Objekt
Browserobjekte befinden, die über die Funktionsaufrufe bearbeitet werden sollen, werden
auch andere Funktionen angeboten, die ausschließlich die Objekte verändern, die als
Parameter übergeben werden. Derartige Funktionen sind auch als statische Funktionen
bekannt: Sie beziehen sich nicht auf das Objekt, für das sie aufgerufen werden. Zu diesen
Funktionen gehört zum Beispiel trim().

alert($.trim(' Hallo, Welt! '));

trim() entfernt Leerzeichen, die am Anfang oder Ende eines Strings stehen. Nachdem diese
Funktion einen Parameter erwartet, kann sie direkt für $ aufgerufen werden, ohne dass über
die Funktion $() HTML-Elemente ausgewählt werden müssen.

3. jQuery und Prototype. Verhindern von Konflikten

In der Javascript-Spezifikation ist angegeben, aus welchen Zeichen Variablen- und
Funktionsnamen bestehen dürfen. Während das Dollarzeichen zu diesem Zeichensatz
gehört, aus dem Namen gebildet werden dürfen, ist es in der Spezifikation besonders
hervorgehoben. So soll es speziell in Code verwendet werden dürfen, der
maschinengeneriert ist.

Auch wenn jQuery nicht maschinengeneriert ist, haben sich seine Entwickler entschieden,
die Funktion jQuery() auch als $() zur Verfügung zu stellen. Während das allein kein
Problem ist, existiert mindestens eine andere Javascript-Bibliothek, die ebenfalls ihre
wichtigste Funktion prominent hervorhebt und $() nennt: Prototype. Das führt zu
Problemen, wenn jQuery gemeinsam mit Prototype verwendet werden soll.

Das jQuery-Objekt bietet eine Funktion namens noConflict() an, mit der Konflikte
bezüglich der Verwendung des Dollarzeichens gelöst werden können. Wenn Sie diese
Funktion aufrufen, wird das Dollarzeichen von jQuery nicht als Alias für jQuery()

verwendet. Wenn Sie es zum Beispiel gewohnt sind, über $() auf eine Funktion aus einer
anderen Javascript-Bibliothek wie Prototype zuzugreifen, sollten Sie noConflict() aufrufen.
Für jQuery müssen Sie dann aber entweder jQuery() verwenden oder erstellen eine neue
Variable, der Sie den Rückgabewert von noConflict() zuweisen.

<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
var j = jQuery.noConflict();
j(function() {
alert($('prototype').innerHTML);
});
</script>
</head>
<body>
<p id="prototype">jQuery sample</p>
</body>
</html>

Im obigen Beispielprogramm wird noConflict() aufgerufen und der Rückgabewert der
Variablen j zugewiesen. Damit kann jQuery nicht mehr über $(), sondern nur mehr über
jQuery() und j() verwendet werden.

Die $()-Funktion, die im obigen Programm aufgerufen wird, stammt von der Javascript-
Bibliothek Prototype. Diese Funktion erwartet einen ID-Wert als Parameter, der deswegen
dem <p>-Tag zugewiesen wurde.

Beachten Sie, dass Sie die jQuery-Bibliothek nach allen anderen Javascript-Bibliotheken per
<script>-Tag einbinden müssen, damit der Aufruf von noConflict() funktioniert. So wird
im obigen Beispiel zuerst Prototype und dann jQuery eingebunden.

4. Selektoren. HTML-Elemente auswählen

Wenn Sie mit jQuery arbeiten, greifen Sie üblicherweise zuerst auf die Funktion $() zu. Sie
übergeben ihr einen Selektor, um die HTML-Elemente auszuwählen, die Sie dann in einem
zweiten Schritt verarbeiten möchten.

Für den Selektor greift jQuery auf die CSS Spezifikation zu. Denn im CSS-Standard mussten
Selektoren definiert werden, die es ermöglichen, HTML-Elemente auszuwählen, um sie zu
formatieren. Wenn Sie den CSS-Standard kennen, kennen Sie auch automatisch die Syntax,
die jQuery bei Selektoren erwartet.

Die Unterstützung von Selektoren ist in jQuery sehr umfangreich. So werden nicht nur viele
Selektoren unterstützt, die im sogenannten Selectors Level 3 für CSS 3 vorgeschlagen
wurden. Es stehen darüberhinaus zahlreiche Selektoren zur Verfügung, die von jQuery neu
definiert wurden und in der Praxis sehr nützlich sein können. In der jQuery-Dokumentation
finden Sie eine vollständige Liste an unterstützten Selektoren.

<html>
<head>
$(function() {
alert($('html > :last > :header:contains("sample 1") ~
p[class*="a"]').get(0).innerHTML);
});
</script>
</head>
<body>
<h1>jQuery samples</h1>
<h2>jQuery sample 1</h2>
<p class="a b">jQuery sample 1a</p>
<p class="b c">jQuery sample 1b</p>
</body>
</html>

Im obigen Beispiel wird ein absichtlich kompliziert konstruierter Selektor verwendet, um
Ihnen zu zeigen, wie ein HTML-Element ausgewählt werden kann. Die in der Praxis
verwendeten Selektoren sind typischerweise kürzer und einfacher zu verstehen. Das Beispiel
soll Ihnen lediglich zeigen, welche komplexen Ausdrücke jQuery unterstützt.

Im obigen Selektor wird zuerst das <html>-Element ausgewählt, um dann sämtliche direkten
Kindelemente zu selektieren. Über :last werden die Kindelemente gefiltert: Das letzte
Kindelement von <html> ist <body>.

Im nächsten Schritt wird auf die Kindelemente von <body> zugegriffen, wobei auch diese
gefiltert werden. Zuerst werden mit :header lediglich die Kindelemente ausgewählt, die
Überschriften darstellen. Dann werden diese Überschriften gefiltert. Die einzige Überschrift,
die den Text enthält, der :contains übergeben wird, ist h2.

Über die Tilde wird auf HTML-Elemente zugegriffen, die sich auf der gleichen Ebene wie h2
befinden. Es werden demnach beide Paragraphen ausgewählt. Weil in eckigen Klammern
das class-Attribut daraufhin verglichen wird, ob es den Wert a enthält, werden die
Paragraphen nochmal gefiltert.

Wenn Sie obiges Beispielprogramm ausführen, wird jQuery sample 1a ausgegeben.

Übrigens: Die Möglichkeit, HTML-Elemente flexibel über Selektoren auszuwählen, ist
inzwischen vom W3C in der Selectors API standardisiert worden. Mehrere Browser
unterstützen bereits die entsprechende Funktion querySelectorAll(), der ähnlich wie $()
ein Selektor übergeben werden kann. Während querySelectorAll() jedoch nur in den
neuesten Browserversionen unterstützt wird, kann der Zugriff per Selektor dank jQuery in
allen heute üblicherweise verwendeten Browserversionen erfolgen.

5. Navigation. Von Browserobjekten im jQuery-Objekt zu anderen HTML-
Elementen navigieren

Wenn Sie die Funktion $() aufgerufen und ihr einen Selektor übergeben haben, erhalten Sie
ein jQuery-Objekt, in dem sich die gefundenen Browserobjekte befinden. Während $() die
wichtigste Funktion darstellt, um HTML-Elemente auszuwählen, können Sie auch ausgehend
von den Browserobjekten in einem jQuery-Objekt zu anderen HTML-Elementen navigieren.
Dazu bietet jQuery eine Reihe von Funktionen an, mit denen von HTML-Elementen auf
andere HTML-Elemente zugegriffen werden kann. Diese Funktionen verändern nicht die
HTML-Elemente in einer Webseite, sondern ausschließlich die Auswahl an Browserobjekten
in einem jQuery-Objekt. In der jQuery-Dokumentation finden Sie eine vollständige Übersicht
über Navigationsfunktionen.

<html>
<head>
$(function() {
alert($
().children().children(':last').find(':header').next('p').get(0).innerHTML)
;
});
</script>
</head>
<body>
</body>
</html>

Im obigen Beispielprogramm wird kein Selektor verwendet, um ein HTML-Element der
Webseite auszuwählen. Stattdessen wird auf zahlreiche Funktionen zugegriffen, um sich
ausgehend vom jQuery-Objekt, das von $() zurückgegeben wird, durch die HTML-Elemente
der Webseite zu navigieren.

Wenn kein Selektor an $() übergeben wird, gibt die Funktion ein jQuery-Objekt zurück, das
das Browserobjekt document enthält. Somit ist nach einem Aufruf von $() ohne Selektor das
<html>-Element ausgewählt.

Der erste Aufruf von children() gibt die beiden Kindelemente <head> und <body> zurück.
Genauer gesagt wird ein jQuery-Objekt zurückgegeben, das zwei Browserobjekte enthält, die
<head> und <body> repräsentieren.

Der Funktion children() kann optional ein Selektor übergeben werden, was beim zweiten
Aufruf geschieht: Indem :last übergeben wird, werden die Kindelemente von <body>
ausgewählt.

Im nächsten Schritt wird nach Überschriften innerhalb von <body> gesucht. Während
children() nur direkte Kindelemente zurückgibt, findet find() auch HTML-Elemente in
tieferen Ebenen.

next() gibt für jedes Browserobjekt das HTML-Element zurück, das sich auf gleicher Ebene
hinter dem HTML-Element befindet, das das Browserobjekt repräsentiert. Weil auch next()
ein Selektor übergeben werden kann, um HTML-Elemente zu filtern, wird im obigen
Beispielprogramm der erste Paragraph hinter <h2> zurückgegeben. Die Überschrift <h1> hat
zwar ebenfalls ein nachfolgendes HTML-Element auf gleicher Ebene. Dabei handelt es sich
aber nicht um einen Paragraphen, sondern um <h2>.

Obiges Programm gibt jQuery sample 1a aus.

6. Manipulatoren. Browserobjekte bearbeiten und verändern

Wenn Sie mit $() und eventuell mit Hilfe der Navigationsfunktionen Browserobjekte
erhalten haben, die die HTML-Elemente repräsentieren, die Sie bearbeiten möchten, können
Sie eine ganze Reihe an Funktionen verwenden, um die Browserobjekte zu manipulieren.
jQuery bezeichnet diese Funktionen als Manipulatoren.

Die Dokumentation der Manipulatoren ist recht übersichtlich. Während die von jQuery
angebotenen Manipulatoren browserunabhängig sind, müssen Sie in der Praxis unter
Umständen dennoch auf Funktionen zugreifen, die vom W3C standardisiert sind oder nur
von bestimmten Browsern angeboten werden. jQuery versucht nicht, sämtliche
Browserobjekte und ihre Funktionen neu zu erfinden, sondern stellt lediglich vereinfachte
Funktionen zur Verfügung, die dann aber natürlich browserunabhängig sind.

Beachten Sie, dass Sie die Dokumentation von Manipulatoren zum Lesen und Schreiben von
Attributen auf einer anderen Webseite in der jQuery-Dokumentation finden.

<html>
<head>
$(function() {
alert($('p:first').text());
});
</script>
</head>
<body>
</body>
</html>

In allen bisherigen Beispielen in diesem Artikel wurde bisher der Text in einem HTML-
Element mit innerHTML ausgegeben. Dabei handelt es sich um eine Eigenschaft, die weder

standardisiert ist noch von jQuery angeboten wird. Weil diese Eigenschaft jedoch in allen
gängigen Browsern unterstützt wird, wurde sie bisher in den Beispielen verwendet.

jQuery bietet nun einen Manipulator namens text() an, der den Text innerhalb eines
HTML-Elements zurückgibt. Da die Funktion text() vom jQuery-Objekt angeboten wird,
muss auch nicht mehr mit get() auf ein Browserobjekt im jQuery-Objekt zugegriffen
werden. Obiges Programm gibt jQuery sample 1a aus.

Beachten Sie, dass text() der Eigenschaft innerHTML nicht wirklich entspricht. Die Funktion
text() ist eher vergleichbar mit der Eigenschaft innerText. Da diese jedoch ausschließlich
vom Internet Explorer angeboten wird, wurde in den Beispielen innerHTML vorgezogen.
Möchten Sie eine jQuery-Funktion verwenden, die innerHTML entspricht, können Sie html()
aufrufen.

<html>
<head>
$(function() {
alert($('p').text());
});
</script>
</head>
<body>
</body>
</html>

Da text() für ein jQuery-Objekt aufgerufen werden kann, in dem sich wohlmöglich mehrere
Browserobjekte befinden, wird der gesamte Text aller HTML-Elemente, der die
Browserobjekte entsprechen, verkettet zurückgegeben. Für obiges Programm bedeutet das,
dass jQuery sample 1ajQuery sample 1b ausgegeben wird.

Um CSS-Eigenschaften zu lesen und zu schreiben, steht eine Funktion css() zur Verfügung.

<html>
<head>
$(function() {
alert($('p').css('border', 'solid 1px #000').css('border-left-
width'));
});
</script>
</head>

<body>
</body>
</html>

Im obigen Programm wird um den Paragraphen zuerst ein Rahmen gezeichnet. Im zweiten
Schritt wird die Rahmenbreite ausgelesen.

Obiges Programm gibt 1px aus.

7. Positionierung. Positionsangaben und Größen

Um die Position eines HTML-Elements zu erhalten, bietet jQuery Funktionen wie offset()
oder position() an. Diese Funktionen können jedoch nicht verwendet werden, um die
Position zu ändern.

Wenn sich ein HTML-Element innerhalb eines anderen befindet, das gescrollt werden kann,
kann über Funktionen wie scrollTop() und scrollLeft() die Scrollposition sowohl
gelesen als auch gesetzt werden.

Um die Breite und Höhe eines HTML-Elements zu erhalten, können die Funktionen width()
und height() aufgerufen werden. Je nachdem, ob Rahmen und Abstände berücksichtigt
werden sollen, stehen auch innerWidth(), outerWidth(), innerHeight() und
outerHeight() zur Verfügung. Ausschließlich width() und height() können sowohl zum
Lesen als auch Schreiben verwendet werden.

Die Dokumentation der Funktionen zu Positionsangaben und Größen enthält eine Übersicht
über alle angebotenen Funktionen.

<html>
<head>
$(function() {
alert($('p').width());
});
</script>
</head>
<body>
</body>
</html>

Wenn Sie obiges Programm ausführen, wird die Breite des Paragraphen in Pixel ausgegeben.
Die Breite hängt von der Größe des Browserfensters ab. Viel wichtiger ist jedoch, dass
tatsächlich ein Zahlenwert zurückgegeben wird, obwohl die Breite des Paragraphen nicht
explizit gesetzt wurde.

8. Effekte. Kleinere Animationen

Während Sie mit den kennengelernten Manipulatoren HTML-Elemente dynamisch
verändern können, stehen einige Funktionen zur Verfügung, um besondere Effekte zu
erzeugen. Dabei werden HTML-Elemente schrittweise verändert, um kleinere Animationen
abzuspielen. Zu diesen Animationen zählt zum Beispiel ein weiches Ein- und Ausblenden von
HTML-Elementen. In der Dokumentation finden Sie eine Übersicht über die angebotenen
Effekte.

<html>
<head>
$(function() {
$('p').fadeOut(1000);
});
</script>
</head>
<body>
</body>
</html>

Im obigen Beispielprogramm wird nach dem Laden der Webseite der Paragraph innerhalb
von einer Sekunde ausgeblendet, indem fadeOut() aufgerufen und der Funktion die Zahl
1000 übergeben wird.

Die Animationen erfolgen, indem verschiedene Eigenschaften von HTML-Elementen
schrittweise geändert werden. Da alle Eigenschaften unterstützt werden, die auf
Zahlenwerten basieren, bietet jQuery mit animate() eine Funktion an, mit der beliebige
Animationen erstellt werden können.

<html>
<head>
$(function() {
$('p').animate({
fontSize: '3em'
}, 1000).fadeOut(1000);
});
</script>
</head>
<body>
</body>
</html>

animate() muss ein Objekt übergeben werden, dessen Schlüssel CSS-Eigenschaften
entsprechen. CSS-Eigenschaften, deren Namen Bindestriche enthalten, müssen in der
sogenannten CamelCase-Schreibweise angegeben werden: Der Bindstrich wird gelöscht, und
der erste Buchstabe nach dem Bindestrich groß geschrieben.

Im obigen Programm wird die Schrift des Paragraphen innerhalb von einer Sekunde auf die
dreifache Größe aufgeblasen, bevor der gesamte Paragraph dann wiederum innerhalb einer
Sekunde ausgeblendet wird. Der mehrfache Aufruf von Effekt-Funktionen führt dazu, dass
diese Effekte nacheinander ausgeführt werden.

Beachten Sie, dass jQuery keine Animationen bezüglich Farben unterstützt. Dazu muss ein
jQuery-Plug-In wie Color Animations verwendet werden.

9. Ereignisse. Auf Ereignisse reagieren

Wenn Sie die Beispiele in diesem Artikel ausführen, wird jeweils sofort nach dem Laden der
Webseite auf jQuery zugegriffen, um HTML-Elemente auszuwählen und zu bearbeiten. In der
Praxis ist es oftmals notwendig, nicht nach dem Laden der Webseite, sondern als Reaktion
auf bestimmte Ereignisse HTML-Elemente zu ändern - zum Beispiel nach einem Mausklick.

jQuery bietet mit bind() und unbind() zwei Funktionen an, um sogenannte Event-Handler
an HTML-Elemente zu binden und wieder zu entfernen.

<html>
<head>
$(function() {
$('p').bind('click', function(e) {
$('p').unbind('click');
var s = '<p>';
for (key in e)
s += key + ': ' + e[key] + '<br>';
$('p').after(s + '</p>');
});
});
</script>
</head>
<body>
</body>
</html>

Obiges Programm bindet einen Event-Handler für Mausklicks an den Paragraphen. Dazu wird
die Funktion bind() aufgerufen und ihr als erster Parameter ein String übergeben, der das
Ereignis beschreibt, bei dessen Eintreten die Funktion aufgerufen werden soll, die als zweiter
Parameter übergeben wird. Die Dokumentation enthält eine Liste unterstützter Ereignisse.

Die Funktion, die als zweiter Parameter an bind() übergeben wird, ist der Event-Handler.
Diesem Event-Handler wird beim Aufruf ein Event-Objekt übergeben. Es handelt sich hierbei

nicht um ein Browserobjekt, sondern um ein Objekt, das von jQuery zur Verfügung gestellt
wird. So ist es auch möglich, wenn auch selten erforderlich, dieses Event-Objekt selbst zu
erstellen:

var e = $.Event("click");

Das Event-Objekt, das von jQuery an Event-Handler übergeben wird, stellt zusätzliche
Informationen zum eingetretenen Ereignis zur Verfügung. So existieren zum Beispiel
Eigenschaften wie pageX und pageY, die die Position des Mauszeigers in Relation zur linken
oberen Ecke des Dokuments zurückgeben.

Obiges Programm liest sämtliche Eigenschaften des Event-Objekts aus und gibt sie in die
Webseite aus. Das sind neben pageX und pageY zahlreiche weitere Eigenschaften. Während
jQuery sicherstellt, dass das Event-Objekt auf jedem Browser die jeweils gleichen
Eigenschaften anbietet, können sich die Werte unterscheiden. Da jQuery auf das Event-
Objekt des Browsers zugreift, um die Eigenschaften seines eigenen Event-Objekts zu setzen,
hängt es vom verwendeten Browser ab, auf welchen Wert jede einzelne Eigenschaft gesetzt
wird. So sollten Sie für browserunabhängigen Code zum Beispiel überprüfen, ob eine
Eigenschaften auf null gesetzt ist, bevor Sie versuchen, auf sie zuzugreifen.

Im Event-Handler im obigen Programm wird außerdem mit unbind() der Event-Handler
vom Paragraphen gelöst. Es wird also lediglich ein einziger Mausklick auf den Paragraphen
bearbeitet.

Möchten Sie wirklich nur auf ein einziges Ereignis reagieren, können Sie statt bind() und
unbind() die Funktion one() verwenden.

<html>
<head>
$(function() {
$('p').one('click', function(e) {
var s = '<p>';
for (key in e)
s += key + ': ' + e[key] + '<br>';
$('p').after(s + '</p>');
});
});
</script>
</head>
<body>
</body>
</html>

Obiges Beispielprogramm reagiert ebenfalls nur einmal auf einen Mausklick auf den
Paragraphen. Es ist nicht mehr notwendig, unbind() aufzurufen.

Anstatt darauf zu warten, dass ein Ereignis eintritt, können Sie es auch selbst auslösen. Dazu
rufen Sie die Funktion trigger() auf.

<html>
<head>
$(function() {
var s = '<p>';
for (key in e)
s += key + ': ' + e[key] + '<br>';
$('p').after(s + '</p>');
}).trigger('click');
});
</script>
</head>
<body>
</body>
</html>

Wenn Sie obiges Beispielprogramm ausführen, wird nach dem Laden der Webseite nicht nur
ein Event-Handler an den Paragraphen gebunden. Es wird anschließend sofort ein Mausklick
simuliert.

Wenn Sie sich die Ausgabe der Eigenschaften des Event-Objekts im obigen
Beispielprogramm ansehen und sie mit dem vergleichen, was die vorherigen
Beispielprogramme in diesem Abschnitt ausgeben, stellen sie fest, dass weniger
Eigenschaften in die Webseite geschrieben werden. Der Grund ist, dass beim simulierten
Mausklick mit trigger() kein Browserobjekt zur Verfügung steht, von dem Werte
übernommen werden können. Die Eigenschaften, die obiges Programm ausgibt, stellen die
Rumpfeigenschaften des Event-Objekts dar, die immer vorhanden sind und ausgewertet
werden können.

In der DOM-Spezifikation des W3C ist das sogenannte Event-Bubbling definiert. Aufgrund
der hierarchischen Struktur von HTML-Dokumenten wird bei einem Ereignis unter
Umständen nicht nur der Event-Handler eines, sondern mehrerer HTML-Elemente
ausgeführt. Es hängt dabei vom Ereignis ab, ob mehrere Event-Handler ausgeführt werden
oder nicht. Der Mausklick ist ein Beispiel für ein Ereignis, das zum Aufruf mehrerer Event-
Handler führen kann.

<html>
<head>
$(function() {

alert('p');
});
$('button').one('click', function(e) {
alert('button');
});
});
</script>
</head>
<body>
<p><button>jQuery sample</button></p>
</body>
</html>

Wenn Sie obiges Programm ausführen und auf die Schaltfläche klicken, wird zuerst button
und dann p ausgegeben. Sie klicken zwar auf die Schaltfläche vom Typ <button>. Da sich
diese Schaltfläche jedoch innerhalb des Paragraphen befindet, wird auch dessen Event-
Handler ausgeführt.

Sie können das Event-Bubbling stoppen, indem Sie für das Event-Objekt stopPropagation()
aufrufen.

<html>
<head>
$(function() {
alert('p');
});
alert('button');
e.stopPropagation();
});
});
</script>
</head>
<body>
</body>
</html>

Obiges Programm gibt bei einem Mausklick auf die Schaltfläche nur mehr button aus.

Sind mehrere Event-Handler an die Schaltfläche gebunden, werden diese trotz eines Aufrufs
von stopPropagation() alle ausgeführt. Möchten Sie wirklich überhaupt keinen Event-
Handler mehr ausführen - weder von umgebenden HTML-Elementen noch vom aktuellen
HTML-Element - müssen Sie stopImmediatePropagation() aufrufen.

<html>
<head>

$(function() {
alert('button 1');
e.stopImmediatePropagation();
});
alert('button 2');
});
});
</script>
</head>
<body>
</body>
</html>

Obiges Programm gibt ausschließlich button 1 aus.

Beachten Sie, dass jQuery zahlreiche Hilfsfunktionen unterstützt, um das Binden von Event-
Handlern zu vereinfachen. So können Sie zum Beispiel einen Event-Handler für einen
Mausklick registeren, indem Sie click() aufrufen anstatt den String "click" an bind() zu
übergeben.

<html>
<head>
$(function() {
$('button').click(function(e) {
alert('button');
});
});
</script>
</head>
<body>
</body>
</html>

Neben click() stehen zahlreiche weitere Hilfsfunktionen für andere Ereignisse bereit. In
der Dokumentation finden Sie wie üblich eine Übersicht über sämtliche Funktionen zur
Ereignisbehandlung.

Beachten Sie, dass sich in allen Event-Handlern das Schlüsselwort this jeweils auf das
HTML-Element bezieht, das das Ereignis auslöst. Wenn Sie also zum Beispiel bei einem
Mausklick wissen möchten, auf welches HTML-Element geklickt wurde, können Sie auf
dieses über this direkt zugreifen. Wahlweise können Sie auch auf die Eigenschaft
currentTarget des Event-Objekts zugreifen. jQuery garantiert, dass diese Eigenschaft und
this in Event-Handlern auf den gleichen Wert gesetzt sind.

10. Ajax. Webseiten unsichtbar für den Anwender aufrufen

Unter Ajax versteht man das Laden von Webseiten per Javascript, ohne dass die im Browser
zu sehende Webseite wechselt. Da genaugenommen keine Webseite geladen werden muss,
sondern bei einem Zugriff auf eine URL beliebige Daten vom Server abgerufen werden
können, können Daten vom Anwender unbemerkt vom Server geladen werden - und
natürlich auch Daten zum Server schicken. Im Folgenden wird daher nicht von Webseiten
gesprochen, sondern allgemein von Ressourcen, auf die mit Ajax-Funktionen zugegriffen
werden kann.

Aus Sicherheitsgründen gestatten zahlreiche Browser Webseiten ausschließlich eine
Verbindung zu dem Server aufzubauen, von dem die Webseite geladen wurde. Wenn Sie
Ajax einsetzen möchten, müssen Sie also auf Ihrem Server entsprechende Dienste anbieten.
Der Versuch, auf Dienste zuzugreifen, die auf anderen Servern angeboten werden, wird in
den meisten Browsern aus Sicherheitsgründen fehlschlagen.

<html>
<head>
$(function() {
$('form').submit(function() {
var jForm = $(this);
$.get(jForm.attr('action'), { q:
jForm.find('input[type="text"]').val(), ajax: true }, function(data) {
$('body').append('<hr>' + data.replace(/</g,
'<').replace(/>/g, '>'));
}, 'html');
return false;
});
});
</script>
</head>
<body>
<form action="http://www.highscore.de/">
<p>
<input type="text" name="q">
<input type="submit" value="Suchen">
</p>
</form>
</body>
</html>

Im obigen Beispielprogramm wird ein Formular zur Verfügung gestellt, das per Ajax auf die
Suchfunktion der Highscore-Website zugreift. Diese ist unter der Adresse
http://www.highscore.de/ verfügbar und erwartet hinter einem Parameter q das oder die
Suchbegriffe.

Während die Suchfunktion über einen herkömlichen Aufruf der Adresse im Browser
ausgeführt werden kann und daraufhin eine Webseite mit den gefundenen Resultaten

liefert, kann ein zusätzlicher Parameter ajax auf true gesetzt werden, damit nur Resultate
geliefert werden - ohne umgebende Webseite. Genau dies wird im obigen Beispiel gemacht.

jQuery stellt eine Funktion namens get() zur Verfügung, über die auf eine Ressource
zugegriffen werden kann. Der erste Parameter, der an get() übergeben wird, muss die
Adresse der Ressource sein. Beachten Sie, dass Sie für Webanwendungen, die in möglichst
vielen Browsern funktionieren sollen, unbedingt eine Adresse angeben müssen, die auf eine
Ressource auf dem gleichen Webserver zeigt, von dem die Webseite geladen wurde. Wenn
Sie den Hostnamen weglassen und zum Beispiel statt http://www.highscore.de/ einfach
nur / angeben, ist dies sichergestellt.

Als zweiter Parameter erwartet get() ein Objekt mit beliebig vielen Schlüssel-Wert-Paaren.
Dieses Objekt wird umgewandelt in einen String, der an die Adresse, die als erster Parameter
übergeben wurde, verbunden mit einem Fragezeichen angehängt wird. Auf diese Weise wird
von jQuery eine Adresse wie http://www.higshcore.de/?q=Suchwort&ajax=true gebildet.
Wahlweise können Sie als zweiten Parameter auch direkt einen String angeben.

Der dritte Parameter ist die Funktion, die von jQuery aufgerufen werden soll, wenn die
Ressource komplett empfangen wurde. Dabei wird die Ressource als Parameter an diese
Funktion übergeben - im obigen Beispiel data genannt. Um was es sich für Daten genau
handelt, hängt natürlich von der Ressource ab, auf die zugegriffen wird. Sie können in einem
vierten Parameter an get() angeben, welche Daten Sie erwarten. Ist dies so wie oben
"html", handelt es sich beim Parameter data um einen String, der HTML enthält.

Wenn Sie obiges Programm ausführen und zum Beispiel nach "Javascript" suchen, wird das
Ergebnis - ein HTML-String - in die Webseite eingefügt. Wie Sie dann sehen werden, handelt
es sich dabei nicht um den HTML-Code einer komplette Webseite, sondern lediglich um eine
Tabelle. Da ein Dienst beliebige Daten zurückgegeben kann, kann eine Webseite auf diese
Weise über get() mit dem Server kommunizieren.

<html>
<head>
$(function() {
$.ajaxSetup({ timeout: 20000 });
$.get(jForm.attr('action'), { q:
jForm.find('input[type="text"]').val(), ajax: true }, function(data) {
'<').replace(/>/g, '>'));
}, 'html');
return false;
});
});
</script>
</head>
<body>

<p>
</p>
</form>
</body>
</html>

Es gibt zahlreiche Parameter, mit denen der Aufruf von Ajax-Funktionen wie get()
konfiguriert werden kann. Dazu zählt zum Beispiel die Einstellung, wie lange gewartet
werden soll, bevor der Aufruf einer Ressource abgebrochen wird, wenn keine Daten
empfangen werden.

jQuery stellt eine Funktion ajaxSetup() zur Verfügung, der Sie ein Objekt bestehend aus
beliebig vielen Schlüssel-Wert-Paaren übergeben können. So wird im obigen
Beispielprogramm der Timeout für einen Abbruch auf 20 Sekunden gesetzt. Eine Übersicht
über alle Ajax-Optionen finden Sie in der Dokumentation.

<html>
<head>
$(function() {
$.ajax({
data: { q: jForm.find('input[type="text"]').val(), ajax:
true },
dataType: 'html',
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('body').append('<hr>' + textStatus);
},
success: function(data) {
'<').replace(/>/g, '>'));
},
timeout: 1,
url: jForm.attr('action')
});
return false;
});
});
</script>
</head>
<body>
<p>
</p>
</form>
</body>
</html>

Neben der Möglichkeit, mit ajaxSetup() Einstellungen für alle Ajax-Funktionen
vorzunehmen, die in einem Programm aufgerufen werden, steht mit ajax() eine Low-Level-
Funktion zur Verfügung, der Optionen direkt übergeben werden müssen. Das ist zum
Beispiel dann hilfreich, wenn im Fehlerfall eine Funktion aufgerufen werden soll. Im
Gegensatz zu get() kann eine derartige Funktion in den Optionen für ajax() angegeben
werden.

Das obige Beispielprogramm macht grundsätzlich das gleiche wie das vorherige, in dem
get() aufgerufen wurde. Die einzigen Unterschiede sind, dass der Timeout auf 1
Millisekunde gesetzt und eine Funktion angegeben wurde, die im Fehlerfall aufgerufen wird.
Wenn Sie das Programm ausführen, wird aufgrund des geringen Timeouts mit ziemlicher
Sicherheit sofort die Funktion für den Fehlerfall aufgerufen. Diese besitzt drei Parameter,
von denen der mittlere - im obigen Programm textStatus genannt - den Grund für den Fehler
enthält. So schreibt obiges Programm timeout in die Webseite.

Ajax basiert auf einem Browserobjekt, das in vielen Browsern XMLHttpRequest heißt. Die
Sicherheitsbestimmungen verlangen, dass über dieses Browserobjekt ausschließlich auf
Ressourcen des Servers zugegriffen werden kann, von dem eine Webseite geladen wurde.
Dennoch ermöglicht es jQuery, Ressourcen von anderen Servern zu laden. Diese Zugriffe
basieren auf einem Konzept, das als JSONP bekannt ist. Dabei müssen die entsprechenden
Server JSONP explizit unterstützen. Es ist also nicht möglich, die Sicherheitsbestimmungen
von Ajax auf diese Weise zu umgehen.

Der Trick, auf dem JSONP basiert, ist es, Ressourcen nicht über das XMLHttpRequest-Objekt
zu laden, sondern sie über einen <script>-Tag dynamisch in die Webseite einzubinden. Da
über <script>-Tags problemlos Dateien von beliebigen Servern in eine Webseite
eingebunden werden können, kann auf diese Weise auf Ressourcen auf anderen Servern
zugegriffen werden - immer vorausgesetzt, JSONP wird explizit unterstützt. Dazu gehört,
dass die geladenen Dateien gültigen Javascript-Code enthalten, damit der Browser die mit
dem <script>-Tag geladenen Dateien auch ausführen kann.

<html>
<head>
$(function() {
var action =
'http://ajax.googleapis.com/ajax/services/search/web?callback=?';
$.get(action, { q: jForm.find('input[type="text"]').val(), v:
'1.0' }, function(data) {
var s = '';
$.each(data.responseData.results[0], function(k, v) {
s += k + ': ' + v + '<br>';
});
$('body').append('<hr>' + s);
}, 'json');
return false;
});

});
</script>
</head>
<body>
<form action="http://www.google.com/">
<p>
</p>
</form>
</body>
</html>

Google stellt für zahlreiche Dienste Ajax APIs zur Verfügung. So kann zum Beispiel über die
Google AJAX Search API auf die Suchmaschine zugegriffen werden. Damit das von Javascript
aus in Webseiten funktioniert, die nicht auf dem Google-Server liegen, muss JSONP
verwendet werden. Dazu muss lediglich hinter der Adresse, die als erster Parameter an
get() übergeben wird, ein "?callback=?" gehängt werden.

Der Parameter callback teilt dem entsprechenden Server mit, nicht einfach nur die
gewünschten Daten zu senden, sondern einen Funktionsaufruf zu generieren und die
gewünschten Daten als Parameter an diese Funktion zu übergeben. Dies geschieht
typischerweise im JSON-Format - so auch bei Google. Damit Google aber weiß, welche
Funktion genau aufgerufen werden soll, wird der entsprechende Funktionsname hinter dem
Parameter callback übergeben.

Wie Sie sehen wird jedoch hinter callback ein Fragezeichen angegeben. jQuery ersetzt dieses
Fragezeichen durch einen Funktionsnamen und leitet den Aufruf an die Funktion weiter, die
als dritter Parameter an get() übergeben wird.

Wenn über den <script>-Tag die entsprechende Datei von Google geladen wird, enthält
diese einen Aufruf für eine Funktion, die von jQuery intern definiert wurde. Weil diese
Funktion den Parameter weiterleitet, ist tatsächlich nicht mehr notwendig als "?callback=?"
an die Adresse zu hängen, um die Sicherheitsbeschränkungen von Ajax zu umgehen.

Wenn Sie genau hinsehen, stellen Sie fest, dass außerdem der vierte Parameter von get()
auf "json" gesetzt wurde. Das ist notwendig, damit das Fragezeichen hinter dem callback-
Parameter von jQuery ersetzt wird.

Wenn Sie obiges Programm ausführen, wird das Objekt, das das erste gefundene
Suchergebnis bei Google repräsentiert, in die Webseite geschrieben.

11. Statische Funktionen. Allgemein nützliche Hilfsfunktionen

Statische Funktionen sind Funktionen, die sich nicht auf Browserobjekte beziehen, die sich in
einem jQuery-Objekt befinden. Es handelt sich um Funktionen, die genauso gut als
freistehende Funktionen hätten definiert werden können, ohne sie mit dem jQuery-Objekt in
Verbindung zu bringen. Da sich diese Funktionen nicht auf Browserobjekte in jQuery-
Objekten beziehen, stellen sie ein Sammelsurium allgemein nützlicher Funktionen dar, die
die Entwicklung von Javascript-Programmen vereinfachen sollen. Die im vorherigen
Abschnitt kennengelernten Ajax-Funktionen waren ebenfalls statische Funktionen.

Die statischen Funktionen, die jQuery anbietet, stellen vor allem Hilfsmittel zur Verarbeitung
von Arrays dar. Wie üblich finden Sie eine vollständige Übersicht in der Dokumentation.

<html>
<head>
$(function() {
var a = [ 1, 99, 1000 ];
var s = 0;
$.each(a, function(i) {
s += this;
});
alert(s);
});
</script>
</head>
<body>
</body>
</html>

Eine der häufiger verwendeten statischen Funktionen ist each(). Dieser Funktion wird als
erster Parameter ein Array übergeben. Die Funktion, die als zweiter Parameter übergeben
wird, wird daraufhin für jeden einzelnen Wert im Array aufgerufen.

Innerhalb der Funktion, die als zweiter Parameter übergeben wird, bezieht sich this auf das
Element, für das die Funktion aufgerufen wird. So werden im obigen Beispielprogramm die
Zahlen im Array addiert. Über den Parameter i steht jeweils der Index zur Verfügung, der
ausgehend von 0 mit jedem Funktionsaufruf um 1 erhöht wird.

<html>
<head>
$(function() {
$('p').click(function(e) {
var s = '<p>';
$.each(e, function(k, v) {
s += k + ': ' + v + '<br>';
});
$('p').after(s + '</p>');
});
});
</script>
</head>
<body>
</body>
</html>

Beachten Sie, dass each() als ersten Parameter nicht zwingend ein Array erwartet, sondern
ein Array-ähnliches Objekt. Dazu zählen grundsätzlich alle herkömlichen Objekte in
Javascript. Während Arrays mehrere Werte speichern, über die each() iteriert, besteht ein
Objekt aus mehreren Schlüssel-Wert-Paaren. Wird ein Objekt, das kein Array ist, als erster
Parameter übergeben, werden der Funktion, die als zweiter Parameter angegeben ist,
Schlüssel und Wert übergeben.

Es existiert auch eine Funktion each(), die auf Browserobjekte in einem jQuery-Objekt
angewandt werden kann. Wenn Sie ein jQuery-Objekt haben und für jedes Browserobjekt in
diesem jQuery-Objekt eine Funktion ausführen möchten, können Sie each() für das jQuery-
Objekt aufrufen und als einzigen Parameter die entsprechende Funktion übergeben. Da es
sich bei dieser each()-Funktion nicht um eine statische Funktion handelt, achten Sie darauf,
die Funktionen nicht zu verwechseln.

12. Plug-Ins. Erweiterungen mit neuen Funktionen

Auch wenn jQuery zahlreiche nützliche Funktionen anbietet, handelt es sich im Vergleich zu
anderen Javascript-Bibliotheken um eine kleine Bibliothek. So werden Sie, wenn Sie mit
jQuery arbeiten, hin und wieder Funktionen vermissen, die für Ihre Projekte nützlich wären.
Anstatt diese Funktionen selber zu programmieren, sollten Sie zuerst einen Blick ins Plug-In-
Repository werfen. Denn jQuery stellt eine Schnittelle für Erweiterungen bereit, mit der sich
neue Funktionen dem jQuery-Objekt hinzufügen lassen. Da im Laufe der Zeit unzählige Plug-
Ins entwickelt wurden, ist die Chance groß, dass Sie im Plug-In-Repository auf der Suche
nach den von Ihnen benötigten Funktionen fündig werden.

<html>
<head>
<style type="text/css">
div { position: absolute;
width: 100px;
height: 50px;
border: 1px solid black;
background-color: orange;
cursor: move; }
</style>
src="jquery.event.drag-1.5.min.js"></script>
$(function() {
$('div').drag(function(e) {
$(this).css({
top: e.offsetY,
left: e.offsetX
});
});
});
</script>
</head>
<body>
<div>jQuery sample</div>

</body>
</html>

Während jQuery viele Ereignisse unterstützt, fehlt zum Beispiel die Möglichkeit, auf das
Ziehen eines Elements zu reagieren. Über die Schnittstelle für Plug-Ins ist es jedoch möglich,
eine Funktion drag() dem jQuery-Objekt hinzuzufügen. Da es diesbezüglich bereits ein Plug-
In gibt, wird dies für obiges Beispielprogramm verwendet. Es handelt sich hierbei um das
Plug-In $.Event.Special.Drag.

Plug-Ins werden in eigenen Script-Dateien zur Verfügung gestellt, die von Ihnen nach der
Script-Datei für jQuery eingebunden werden müssen. Sie können auf diese Weise beliebig
viele Plug-Ins verwenden.

Das im obigen Beispielprogramm verwendete Plug-In fügt dem jQuery-Objekt nicht nur eine
drag()-Funktion hinzu, sondern erweitert auch das Event-Objekt von jQuery um zusätzliche
Eigenschaften wie offsetX und offsetY. Damit kann innerhalb des Event-Handlers
herausgefunden werden, um wie viele Pixel ein HTML-Element verschoben wurde. Da das
Plug-In HTML-Elemente nicht automatisch verschiebt, kann diese Information so wie im
obigen Programm verwendet werden, um das HTML-Element entsprechend zu bewegen.

Wenn Sie eigene Plug-Ins erstellen möchten, finden Sie auf der jQuery-Webseite eine
Beschreibung der Plug-In-Schnittstelle. Im Wesentlichen müssen Sie das jQuery-Objekt um
eine Funktion erweitern, die von Entwicklern, die Ihr Plug-In einsetzen werden, aufgerufen
wird. Wie die Funktion mit dem jQuery-Objekt verknüpft wird, hängt davon ab, ob es sich um
eine statische Funktion handelt oder nicht.

Im Folgenden soll die Bibliothek SVG_roundies in einem jQuery-Plug-In verpackt werden.
Diese Bibliothek kann verwendet werden, um mit SVG-Grafiken HTML-Elementen runde
Ecken zu verleihen. Während es genaugenommen notwendig ist, den Code dieser Bibliothek
in eine neue Script-Datei zu kopieren und ihn so zu verpacken, dass ein jQuery-Plug-In
entsteht, wird im Folgenden das Plug-In in einer Webseite entwickelt.

<html>
<head>
div { width: 100px;
height: 50px;
background-color: orange; }
</style>
src="SVG_roundies_0.0.2a.js"></script>
jQuery.fn.roundify = function(rad) {
SVG_roundies.addRule(this.selector, rad);
return this;
}

$(function() {

$('div').roundify('0px 10px');
});
</script>
</head>
<body>
</body>
</html>

Über die Eigenschaft fn kann dem jQuery-Objekt eine neue Funktion hinzugefügt werden, die
sich jeweils auf genau die Browserobjekte bezieht, die sich in einem jQuery-Objekt befinden.
Die Eigenschaft fn ist lediglich ein Alias für prototype. Soll das jQuery-Objekt um eine
statische Funktion erweitert werden, muss die entsprechende Funktion direkt mit jQuery
verbunden werden.

Im obigen Beispiel wird das jQuery-Objekt um eine Funktion roundify() erweitert. Der
Parameter, der dieser Funktion übergeben werden kann, beschreibt den Radius der Ecken
eines HTML-Elements. Er wird im Plug-In an das SVG_roundies-Objekt weitergeleitet, das von
SVG_roundies zur Verfügung gestellt wird.

Weil der entsprechenden Funktion addRule() als erster Parameter ein Selektor übergeben
werden muss, wird auf die Eigenschaft selector des jQuery-Objekts zugegriffen. Auf diese
Weise wird SVG_roundies mitgeteilt, welchen HTML-Elementen runde Ecken hinzuzufügen
sind. Da SVG_roundies lediglich die Funktion addRule() anbietet, gibt es keine andere
Möglichkeit, den mit jQuery bereits ausgewählten Browserobjekten die runden Ecken direkt
hinzuzufügen.

13. jQuery UI. Steuerelemente für grafische Benutzeroberflächen

jQuery UI ist eine Bibliothek, die auf jQuery aufbaut und vor allem Steuerelemente für
grafische Benutzeroberflächen zur Verfügung stellt. Dazu zählen zum Beispiel Registerkarten,
eine Verlaufsanzeige oder auch ein Kalendersteuerlement. Derartige Steuerelemente
bezeichnet jQuery UI als Widgets.

Neben Widgets stellt jQuery UI Interaktionen und Effekte zur Verfügung. Interaktionen sind
Fähigkeiten, mit denen HTML-Elemente versehen werden können, um sie zum Beispiel mit
der Maus verschieben oder in ihrer Größe ändern zu können. Effekte sind vergleichbar mit
denen, die das jQuery-Objekt anbietet und die Sie in diesem Artikel kennengelernt haben.

Während jQuery UI auf der jQuery-Bibliothek aufbaut, handelt es sich nicht bloß um
herkömliche Plug-Ins, wie sie im vorherigen Abschnitt vorgestellt wurden. jQuery UI ist eine
eigenständige Bibliothek, die eigene Schnittstellen zur Entwicklung von Widgets,
Interaktionen und Effekten zur Verfügung stellt.

jQuery UI ist modular aufgebaut. So steht auf der Download-Webseite nicht eine Datei zur
Verfügung, die Sie herunterladen können und sämtliche Funktionen von jQuery UI enthält.
Sie müssen vielmehr die Widgets, Interaktionen und Effekte auswählen, die Sie einsetzen
möchten. Daraufhin wird eine Datei erstellt, die nur das enthält, was Sie brauchen. Das hat
den Vorteil, dass die Dateigröße und somit auch Ladezeiten verringert werden.

Im folgenden Beispielprogramm soll das HTML-Element, das im vorherigen Abschnitt dank
eines jQuery-Plug-Ins mit der Maus verschoben werden konnte, mit Hilfe eines jQuery UI-
Effekts verschiebbar werden.

<html>
<head>
div { position: absolute;
width: 100px;
height: 50px;
background-color: orange;
cursor: move; }
</style>
src="jquery-ui-1.7.2.custom.min.js"></script>
$(function() {
$('div').draggable();
});
</script>
</head>
<body>
</body>
</html>

Um die entsprechende Interaktion mit dem HTML-Element zu ermöglichen, muss die
Funktion draggable() aufgerufen werden. Dieser Funktion kann ein Objekt übergeben
werden, um die Interaktion zu konfigurieren. So kann zum Beispiel angegeben werden, dass
ein HTML-Element nur horizontal oder vertikal bewegt werden kann. Im direkten Vergleich
mit dem Plug-In $.Event.Special.Drag, das im vorherigen Abschnitt verwendet wurde, scheint
es keinen großen Unterschied zu geben.

jQuery UI bietet sich vor allem dann an, wenn Sie Widgets für eine grafische
Benutzeroberfläche wiederverwenden und nicht selbst entwickeln wollen. Während
Interaktionen und Effekte auch über zahlreiche Plug-Ins zur Verfügung stehen, sind es
Widgets, die jQuery UI empfehlenswert machen. So wird im folgenden Beispielprogramm
das Kalendersteuerelement verwendet.

<html>
<head>
$(function() {
$('input').datepicker({ firstDay: 1});

});
</script>
</head>
<body>
<form action="">
<p>
<input type="text">
</p>
</form>
</body>
</html>

Das Kalendersteuerlement wird an ein Eingabefeld gebunden und öffnet sich automatisch,
wenn Sie das Eingabefeld anklicken. Sie können dann im Kalender blättern und auf einen Tag
klicken. Das Datum wird daraufhin ins Eingabefeld eingetragen und das
Kalendersteuerelement geschlossen.

Um das Kalendersteuerlement zu konfigurieren, können Optionen in einem Objekt als
Parameter übergeben werden. So wird mit firstDay im obigen Beispiel angegeben, dass der
Montag der erste Tag der Woche sein soll.

Wenn Sie obiges Programm ausführen und sich das Kalendersteuerelement ansehen, fällt
Ihnen sicher die wenig überzeugende Darstellung auf. Das liegt daran, dass obiges Programm
kein Theme verwendet.

Themes sind etwas, was alle Widgets von jQuery UI unterstützen. Über Themes kann
komfortabel festgelegt werden, wie Widgets angezeigt werden sollen. Denn Widgets
definieren zahlreiche Klassen, die die Formatierung per CSS unterstützen. Um die
Anwendung von Themes zu vereinfachen, ist es sogar möglich, online über den sogenannten
ThemeRoller mit Farben zu experimentieren, um anschließend das fertige Theme
herunterzuladen.

<html>
<head>
<link type="text/css" href="jquery-ui-1.7.2.custom.css"
rel="stylesheet">
$(function() {
$('input').datepicker({ firstDay: 1});
});
</script>
</head>
<body>
<form action="">
<p>
<input type="text">
</p>
</form>
</body>
</html>

Wenn Sie obiges Programm ausführen, wird das Kalendersteuerelement mit einem Theme
verwendet. Dazu wurde lediglich mit dem <link>-Tag eine CSS-Datei eingebunden. Ob Sie
diese CSS-Datei manuell erstellen oder mit Hilfe des ThemeRollers auf der jQuery UI-Website
bleibt Ihnen überlassen.

Schulung jQuery JavaScript-Bibliothek

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Schulung jQuery JavaScript-Bibliothek

Similar to Schulung jQuery JavaScript-Bibliothek (20)

More from tutego

More from tutego (12)

Schulung jQuery JavaScript-Bibliothek