Über unsMediaKontaktImpressum
Ralph Steyer 01. September 2014

jQuery: Einführung mit Beispielen

In diesem Kapitel werden wir ohne weitere Vorbereitungen Kontakt zu jQuery schaffen und erste Beispiele mit jQuery erstellen. Wir springen also direkt ins kalte Wasser. Sie sollen bereits in dieser frühen Phase Ihres Einstiegs in dieses faszinierende Thema ein Gefühl für das bekommen, was man mit jQuery anstellen kann und was Ihnen dieses Framework bringt. Dabei wird bewusst in Kauf genommen, dass zu diesem Zeitpunkt bei den Quelltexten Fragen offen bleiben. Diese Fragen werden aber im Laufe der folgenden Kapitel geklärt. Die Erläuterungen zu den Listings werden auch in dieser Phase nur oberflächlich – aber keinesfalls unwichtig – sein, um nicht vom Stock zum Stöckchen zu geraten. Wir wollen möglichst schnell zur Praxis mit jQuery kommen und erst einmal spielen. Und das bedeutet Beispiele erstellen.

jQuery: Zugriff auf Elemente und Schutz des DOM

Wenn Sie sich bereits etwas mit der Programmierung im WWW auskennen, wissen Sie, dass man auf die Bestandteile einer Webseite per JavaScript oder einer anderen Skriptsprache im Browser über ein Objektmodell mit Namen DOM (Document Object Model) zugreifen kann. Es gibt für so einen Zugriff verschiedene Standardtechniken, die aber alle ihre spezifischen Schwächen haben. Insbesondere müssen Sie beim Zugriff auf ein einziges Element der Webseite (oder eine Gruppe) in der Regel ziemlich viele Zeichen eingeben. Das ist mühselig und fehleranfällig. Die meisten Frameworks stellen deshalb eine Notation zur Verfügung, über die so ein Zugriff mit einer verkürzten, vereinheitlichten Schreibweise erfolgen kann. Und zudem kompensieren die dahinter liegenden Mechanismen der Frameworks diverse Schwächen der Standardzugriffsverfahren, indem sie vor allen Dingen browserabhängige Besonderheiten kompensieren sowie diverse fehlende Funktionalitäten des reinen DOM-Konzepts ergänzen. Besonders wichtig – diese Kompensation ist in der Regel auf allen offiziell unterstützten Browsern getestet und funktioniert deshalb sehr zuverlässig.

Das folgende Beispiel zeigt weiterhin eine andere wichtige Funktionalität von jQuery – den Schutz des DOM. Was es damit auf sich hat, wird natürlich noch viel genauer erläutert. Nur soweit vorab – beim Laden (Parsen) der Webseite verarbeiten verschiedene Browser die Webseite unterschiedlich und es kann beim Zugriff auf die Elemente der Webseite zu einer Vielzahl von Problemen kommen. Das gilt vor allen Dingen dann, wenn man in einem Skript zu früh auf Elemente einer Webseite zugreifen will – also bevor der Browser den DOM
korrekt aufgebaut hat. Hier bietet jQuery ein zuverlässiges Verfahren, um diesem Problem Herr zu werden. Und was Ihnen das Beispiel quasi nebenbei noch zeigt, ist, wie Sie per jQuery standardisiert auf Inhalte von Elementen mit Text zugreifen und auf Ereignisse reagieren können. Doch genug der Vorbemerkung – hier ist unser erstes Listing (kap2_1.html):

Listing 1: Das erste jQuery-Beispiel

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Schutz des DOM</title>
<link href="lib/css/kap2_1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#a").click(function () {
$("#ausgabe").html("Muss das sein?");
});
$("#b").click(function () {
$("#ausgabe").html("Ein nettes Spiel.");
});
$("#c").click(function () {
$("#ausgabe").html("Ein seltsames Spiel. " +
"Der einzig gewinnbringende Zug ist " + "nicht zu spielen!");
});
});
</script>
</head>
<body>
<h1>Willkommen bei WOPR</h1><h3>Wie wäre es mit einem kleinen Spiel?</h3>
<button id="a">Tic Tac Toe</button><button id="b">Schach</button>
<button id="c">Weltweiter Thermonuklearer Krieg</button>
<div id="ausgabe"></div>
</body>
</html>

Erstellen Sie die HTML-Datei einfach in einem eigenen Arbeitsverzeichnis und speichern Sie sie unter dem genannten Namen.

In der Praxis fasst man alle eigenen Ressourcen eines Projekts meist innerhalb eines eigenen Verzeichnisses zusammen. Für ein Webprojekt ist es das Sinnvollste, diese Verzeichnisse im freigegebenen Ordner Ihres Webservers anzulegen. Im Fall von Apache/XAMPP wäre das in der Regel das Verzeichnis htdocs. Das hat den Vorteil, dass Sie – wenn der Webserver läuft – zum Test unmittelbar über HTTP und einen richtigen Webaufruf gehen können und nicht nur die Datei über das FILE-Protokoll in den Browser laden müssen (also das klassische Öffnen als Datei oder das einfache Reinziehen der Datei in den Browser). Letzteres ist ja nicht praxisorientiert, da später die Seiten natürlich auch vom Besucher über einen Webserver angefordert werden.

Wenn Sie mit einer IDE wie Aptana oder dem Visual Studio arbeiten, kann man meist direkt aus der IDE eine Webseite über einen integrierten Webserver ausführen. In Aptana erfolgt das etwa über den Befehl Run und im Visual Studio können Sie die Ausführung über die Funktionstaste (Strg) + F5 aufrufen. Im Head der Webseite sehen Sie einen Verweis auf eine CSS-Datei kap2_1.css, die wir der Vollständigkeit halber hier kurz angeben wollen (sie spielt aber im Grunde keine Rolle):

Listing 2: Die referenzierte CSS-Datei

body {
background:black; color:white; font-size:20px;
}
#ausgabe {
background:white; color:red; font-size:20px; padding:10px; margin:10px;
border-width:1pt; border-style:solid; width:350px; min-height:75px;
}

Praxistipp:

Die CSS-Datei befindet sich in einem Unterverzeichnis lib des
Projektverzeichnisses, in dem die Webseite gespeichert wurde. Dieses Verzeichnis enthält noch ein weiteres Unterverzeichnis css, worin konkret die Datei gespeichert ist. Wenn wir mit externen JavaScript-Dateien arbeiten, werden diese dann in einem Unterverzeichnis js des Unterverzeichnisses lib des Projektverzeichnisses gespeichert. Diese Strukturierung hat sich in der Praxis auf breiter Front durchgesetzt. Das bedeutet, dass sich die jQuery-Bibliothek auch genau da befinden wird, wenn Sie statt eines CDN eine heruntergeladene Version verwenden, die Sie dann selbst bereitstellen. Aber selbstverständlich können Sie auch eine ganz andere Pfadstruktur wählen. Nur sollten Sie grundsätzlich strukturieren und das konsequent durchziehen.

In den Zeilen hinter der Referenz auf die externe CSS-Datei sehen Sie die Referenz auf eine externe JavaScript-Datei – die jQuery-Bibliothek, die in dem konkreten Fall von einem CDN geladen wird. In den folgenden Zeilen steht ein gewöhnlicher JavaScript-Container. In diesem wird mit $(document) die Webseite angesprochen. Die Funktion $() steht in jQuery für eine Kurzschreibweise, um ein Element der Webseite zu referenzieren. Sie ist der zentrale Dreh- und Angelpunkt des gesamten Frameworks und Sie finden diese verkürzten Zugriffsschreibweisen auch in den folgenden Zeilen immer wieder. Nur wird dort als Parameter eine sogenannte ID eines Elements verwendet.

HINWEIS:

Beachten Sie, dass ein Element (im Sinne von jQuery) als Parameter
von $() nicht in Hochkommata eingeschlossen wird, eine ID (oder ein anderer
Selektor) hingegen schon.

Widmen wir uns kurz der Methode ready(). Diese stellt sicher, dass die enthaltenen Aufrufe erst dann ausgeführt werden, wenn die Webseite vollständig geladen und der DOM korrekt aufgebaut wurde. Wie schon angedeutet und ohne richtig in die Tiefe zu gehen – das ist bereits ein Feature, dessen Wert man hoch einschätzen muss.

HINWEIS:

Für die Leser mit entsprechenden Vorkenntnissen ein kleiner Vorgriff – die Methode ready() ist eine Alternative für den Eventhandler onload. Dieser Eventhandler gilt jedoch als unzuverlässig, weil er fehlerhaft in verschiedenen älteren Browser implementiert ist.

Im Inneren der ready()-Methode werden drei Ereignisbehandlungsroutinen notiert, die jeweils die Reaktion bei einem Klick auf die angegebenen Elemente spezifizieren. In unserem Beispiel sind das drei Schaltflächen, die jeweils mit einer eindeutigen ID gekennzeichnet sind.

HINWEIS:

Die Methode click() kapselt naheliegender Weise den Funktionsaufruf
des Eventhandlers onclick.

Die Zuordnung zur richtigen Funktion erfolgt über die ID und das Auslösen der Funktion innerhalb der Methode click(). Beachten Sie, dass wir hier eine sogenannte anonyme Funktion (also ohne Bezeichner) verwenden.

Interessant wird es, wenn ein Anwender nun auf eine Schaltfläche klickt. Dabei wird in einem Bereich der Webseite eine spezifische Textausgabe angezeigt. Dazu verwenden wir wieder $() und eine ID für die Selektion des Bereichs (ein div-Block) und die Methode html() für den Zugriff auf den Inhalt.

HINWEIS:

Die Methode html() ist in jQuery die Alternative zur Verwendung von innerHTML. Das Interessante dabei ist, dass innerHTML schon in der Praxis seit vielen Jahren verwendet, aber erst mit HTML5 offiziell standardisiert wird.

HINWEIS:

Wir werden in allen folgenden Beispielen darauf verzichten, den gesamten Head der Webseite abzudrucken. Die Notation würde nur Platz im Buch verschwenden, da sie immer (fast) gleich ist. Nur bei interessanten Änderungen wird der Code abgedruckt.

Veränderung der Webseite mit DHTML

Grundsätzlich kann man mit Style Sheets die Optik einer Webseite viel besser und effektiver gestalten als mit reinem HTML. Insbesondere kann man damit das Layout von der Struktur der Seite abtrennen. Diese Aussagen sollten – so richtig sie auch sind – für Sie kalter Kaffee sein. Wenn Sie nun die Style Sheets einer Seite dynamisch mit JavaScript verändern, reden wir von DHTML. Aber auch Animationseffekte wie das Ein- und Ausblenden von Teilen einer Webseite über andere JavaScript-Techniken gehören dazu. Lassen Sie uns in diesem und dem folgenden Beispiel ansehen, wie Sie animierte Webseitenänderungen mit jQuery schnell, einfach und bequem und dennoch zuverlässig in den unterschiedlichen Browsern bewerkstelligen können. In diesem Beispiel wechseln wir im Wesentlichen dynamisch die CSS-Klasse eines Elements.

Zuerst betrachten wir eine kleine CSS-Datei, die in der folgenden Webseite eingebunden werden soll und im lib/css-Verzeichnis gespeichert sein sollte (kap2_2.css):

Listing 3: Die neue CSS-Datei

body {
background: black; color: white; font-size: 20px;
}
div {
background: white; color: red; font-size: 20px; padding: 10px; margin: 10px;
border-width: 1pt; border-style: solid; width: 350px; min-height: 75px;
}
.mKlasse {
background: red; color: yellow; font-size: 24px;
}

In der CSS-Datei passiert nicht sonderlich viel. Es werden ein paar Eigenschaften für die gesamte Webseite und alle Elemente vom Typ div festgelegt. Von hauptsächlichem Interesse ist die Klasse .mKlasse. Diese soll beim Laden der folgenden Webseite noch nicht verwendet werden, sondern erst dynamisch bei einer Anwenderaktion zugewiesen werden. Und dazu kommen JavaScript und jQuery zum Einsatz (kap2_2.html):

Listing 4: Verändern der verwendeten CSS-Klasse

...
<script type="text/javascript">
$(document).ready(function () {
$("#a").click(function () {
$("#c").addClass("mKlasse");
});
$("#b").click(function () {
$("#c").removeClass("mKlasse");
});
});
</script>
</head>
<body>
<h1>Veränderung von Style Sheets mit jQuery</h1>
<button id="a">CSS-Klasse hinzufügen</button>
<button id="b">CSS-Klasse entfernen</button><hr />
<div id="c">Niemand ist weiter von der Wahrheit entfernt als derjenige,
der alle Antworten weiß.</div><hr />
<div id="div1">
Vom Wahrsagen lässt sich wohl leben, aber nicht vom Wahrheit sagen.
</div>
</body>
</html>

In dem Beispiel sehen Sie unterhalb einer Überschrift zwei Schaltflächen und zwei Texte jeweils innerhalb eines DIV-Bereichs, der mit einer Trennlinie abgegrenzt wird. Das ist pures HTML. Im Head finden Sie wieder die Verknüpfung mit der CSS-Datei (nicht abgedruckt).

Das Aussehen des Textes unterhalb der Schaltflächen beziehungsweise den ersten DIV-Container wollen wir jedoch mit jQuery nun manipulieren. Dazu hat der DIV-Container eine ID. Der Text darunter ist als Vergleichstext gedacht.

Das Beispiel verwendet zum Zugriff auf Elemente der Webseite die im ersten Beispiel schon besprochenen jQuery-Mechanismen. Auch für die Reaktion auf den jeweiligen Klick auf eine Schaltfläche verwenden wir wieder die Methode click(). Soweit nichts Neues also.

Nun sollte Ihnen auffallen, dass wir die CSS-Klasse aus der verknüpften CSS-Datei beim Laden der Webseite noch keinem Element zuweisen. Aber beachten Sie die Zeile $("#c"). addClass("mKlasse");. Wie der Name der Methode addClass() offensichtlich macht, wird durch den Aufruf dieser Methode dem vorangestellten Element die benannte Style-Sheet-Klasse zugewiesen. Das geschieht dynamisch, aber ohne dass die Webseite irgendwie neu geladen wird. Die Funktionalität wird beim Klick des Anwenders auf den entsprechenden Button ausgelöst, wie Sie auf Grund der umgebenden click()-Methode sehen.

In der Reaktion auf die zweite Schaltfläche können Sie erkennen, wie vollkommen analog die Klasse wieder entfernt wird. Dazu kommt die Methode removeClass() zum Einsatz. Wenn Sie das Beispiel testen, sehen Sie, dass Schrift und Hintergrund entsprechend verändert werden.

PRAXISTIPP:

Mit der Methode toggleClass() könnten wir das Beispiel mit analoger Funktionalität noch leichter schreiben. Damit wird eine CSS-Klasse entfernt oder hinzugefügt und zwar immer abhängig vom Zustand. Ist die Klasse bereits zugewiesen, wird sie entfernt und umgekehrt. Wir bräuchten also nur eine Schaltfläche.

jQuery: Animiertes Verkleinern und Vergrößern eines Elements

Nun wollen wir mit jQuery ein Element animiert verkleinern und vergrößern und es damit aus- beziehungsweise wieder einblenden. Zuerst schauen wir uns die externe CSS-Datei an. Darin wird eine Eigenschaft definiert, die auf die folgenden Animationen konkrete Auswirkungen hat (kap2_3.css):

Listing 5: Die CSS-Datei

body {
background: black; color: white; font-size: 20px;
}
#b2 {
width: 300px;
}
#h2 {
background: white; color: #0000FF; font-size: 18px;
padding: 10px; margin: 10px;
}

Die für das folgende Beispiel interessante Festlegung betrifft die Breitenangabe der Id #b2. Die als Selektor verwendete ID referenziert ein Bild. Die Breitenangabe wird die Art der folgenden Animation beeinflussen. Oder anders ausgedrückt – bei den anderen Bildern, bei denen die Breite nicht festgelegt ist, wird die Animation anders ablaufen.

Aber widmen wir uns zuerst noch der Webseite selbst. Darin finden Sie im Wesentlichen drei Bilder und einen Text darunter. Alle vier Elemente sollen animiert werden (kap2_3.html):

Listing 6: Drei Bilder und einen Text verkleinern oder vergrößern

...
<script type="text/javascript">
$(document).ready(function () {
$("#toggle1").click(function (event) {
$('#b1').slideToggle('slow');
});
$("#toggle2").click(function (event) {
$('#b2').slideToggle('slow');
});
$("#toggle3").click(function (event) {
$('#b3').slideToggle(10000);
$('#h2').slideToggle('slow');
});
});
</script>
</head>
<body>
<h1>Ein Bild und Text mit jQuery animiert ein- und ausblenden</h1>
<button id="toggle1">Toogle Bild 1</button>
<button id="toggle2">Toogle Bild 2</button>
<button id="toggle3">Toogle Text und Bild 3</button><hr />
<img src="images/b1.jpg" id="b1" /><img src="images/b2.jpg" id="b2" />
<img src="images/b3.jpg" id="b3" /><hr />
<h2 id="h2">Animierte Bilder und Texte</h2>
</body>
</html>

Im Zentrum dieser Animation steht die Methode slideToggle(). Auch dieser Name ist sehr sprechend. Mit diesem Effekt lassen sich Objekte je nach aktuellem Zustand ein- oder ausblenden beziehungsweise verkleinern oder vergrößern. Es wird also der aktuelle Zustand umgeschaltet. Sie sehen die Anwendung gleich vier Zeilen mit Animationsaktivitäten. Wie Sie sicher erkennen, taucht als Parameter eine Zeitangabe auf. Diese legt fest, wie lang die Animation benötigen soll. Man kann in allen Animationen in jQuery solche Parameter für die Geschwindigkeit übergeben. Erlaubte Parameter sind slow, normal, fast oder die Angabe in Millisekunden. Die Angabe in Millisekunden wird aber dann in der Regel nicht in Hochkommata eingeschlossen.

Wenn Sie die Animation des ersten Bilds nachvollziehen, werden Sie sehen, dass das Bild beim Verkleinern in der Höhe und Breite reduziert wird und dann ganz verschwindet. Dabei wird kontinuierlich der rechts stehende Inhalt nach links verschoben, ohne dass „Lücken“ auftreten. Umgekehrt wächst das Bild von diesem Punkt aus nach oben und in der Breite und Höhe, wenn Sie erneut die Schaltfläche betätigen. Die beiden anderen Bilder werden dabei kontinuierlich nach links verschoben.

Für dieses Verhalten ist massiv von Bedeutung, dass die Breite von diesem Bild nicht (!) über das width-Attribut beim img-Tag oder über CSS festgehalten wird.

Beim zweiten Bild wird die Breite hingegen über die CSS-Regel für die ID b2 festgelegt. Die verhindert, dass auch die Breite verkleinert wird. Sie werden sehen, dass beim Verkleinern das Bild nur in der Höhe zusammenschnurrt und dann ganz verschwindet.

Erst wenn das Bild 2 ganz verschwunden ist, wird Bild 3 schlagartig dessen ursprünglichen Raum einnehmen.

Beachten Sie nun aber den Text und Bild 3, wenn Sie auf die dritte Schaltfläche klicken. Die Überschrift verschwindet wieder nur hinsichtlich der Höhe. Das Bild 3 hingegen, für das wieder die Breite nicht festgehalten wird, verändert sich in Höhe und Breite.

Offensichtlich spielt es bei der Wirkung von slideToggle() eine Rolle, auf welche Art von Element die Animationstechnik angewendet wird, beziehungsweise es spielen auch noch die CSS- und teils auch formatierenden HTML-Regeln eine Rolle, die einem Element vorher zugewiesen werden. Beachten Sie, dass die Zeitspannen beim Klick auf die dritte Schaltfläche für die jeweiligen Animationen des Textes und des Bilds bewusst unterschiedlich gewählt wurden.

Die Animationen in dem Beispiel sind grundsätzlich unabhängig voneinander. Wenn Sie die Zeitspanne zum Ausführen der verschiedenen Animationen lang genug wählen, um schnell genug Klicks auf die drei Schaltflächen auslösen zu können, können Sie die Animationen parallel laufen lassen.

Die jQuery-Warteschlange

Aber was passiert bei dem Beispiel, wenn Sie die gleiche Schaltfläche mehrfach anklicken? Das ist vielleicht etwas überraschend. Die Ereignisse werden kumuliert. Das bedeutet, sie werden nacheinander ausgeführt, wobei ein Folgeereignis erst dann ausgeführt wird, wenn das vorangehende vollständig abgearbeitet wurde. Das ist ein explizites Feature in jQuery – eine Warteschlange (die jQuery-Queue). Ein erneuter Klick auf die Schaltfläche führt also nicht dazu, dass die laufende Animation abgebrochen und die neue unmittelbar gestartet wird. Das müsste man gegebenenfalls explizit programmieren.

Attribute dynamisch verändern

Wir wollen in einem abschließenden Beispiel durchspielen, wie man mit jQuery Attribute bei einem Element der Webseite dynamisch verändern kann. Dazu stellt jQuery die flexible und nützliche Methode attr() zur Verfügung. Damit können Sie eines oder mehrere Attribute eines Elements dynamisch verändern. Sie setzen in geschweiften Klammern ein Wertepaar als Parameter, wobei zuerst das Attribut spezifiziert wird, dann folgen ein Doppelpunkt und anschließend ein String mit dem neuen Wert. Alternativ können Sie auch zwei String-Parameter angeben. Bei der Variante stehen der erste Parameter für den Attributnamen und der zweite Parameter für den Wert (in dem Fall können Sie aber nur ein Attribut ändern). Wollen Sie nur den Wert eines Attributs abfragen, geben Sie nur den Namen des Attributs als String-Parameter an.

PRAXISTIPP:

Wir werden der Einfachheit halber im folgenden Beispiel nur ein Attribut verändern, aber wenn Sie gleichzeitig mehrere Attribute ändern wollen, brauchen Sie in den geschweiften Klammern nur durch Komma getrennt weitere Wertepaare notieren.

Für unser Beispiel wollen wir ein Bild in der Webseite austauschen, indem wir den Wert des Attributs src eines <img>-Tags verändern (kap2_4.html):

Listing 7: Attribute mit jQuery manipulieren

...
<script type="text/javascript">
$(document).ready(function () {
$("#toggle1").click(function () {
$("img").attr({
src: "images/b1.jpg"
});
});
$("#toggle2").click(function () {
$("img").attr(
"src", "images/b2.jpg"
);
});
});
</script>
</head>
<body>
<h1>Ein Bild austauschen</h1>
<button id="toggle1">Bild 1</button><button id="toggle2">Bild 2</button>
<hr /><img src="images/b1.jpg" />
</body>
</html>

Wir ändern einmal mit der Notation in den geschweiften Klammern den Wert und einmal mit den zwei String-Parametern. Wie oben beschrieben wird jeweils der Wert von src ausgetauscht (Abb. 14).

Zusammenfassung

Sie haben in dem Kapitel erst einige wenige Beispiele gesehen, die aber schon recht gut entscheidende Schlüsselfaktoren von jQuery demonstriert haben. Sie sollten sich insbesondere die Funktion $() und die ready()-Methode merken. Aber auch Techniken zur Spezifizierung von Reaktionen wie die click()-Methode sind elementar wichtig. Und Animationstechniken wie addClass(), toggleClass(), removeClass() oder slideToogle() werden Ihnen auch später in der Praxis bei DHTML-Effekten hilfreich sein. Auch das Verändern von Attributwerten (attr()) haben Sie kennengelernt. Richtig verständlich werden die Techniken in den weiteren Kapiteln des Buchs, wenn Sie in das Gesamtkonzept von jQuery tiefer eingestiegen sind.

Autor

Ralph Steyer

Der Diplom-Mathematiker Ralph Steyer arbeitet seit 1996 selbstständig als Fachautor, Fachjournalist, EDV-Dozent und Programmierer.
>> Weiterlesen
Buch des Autors:

botMessage_toctoc_comments_9210