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="ht tp://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="ht tp://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):
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;
}...
<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>
jQuery: Animiertes Verkleinern und Vergrößern eines Elements
body {
background: black; color: white; font-size: 20px;
}
#b2 {
width: 300px;
}
#h2 {
background: white; color: #0000FF; font-size: 18px;
padding: 10px; margin: 10px;
}
...
<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>
Die jQuery-Warteschlange
Attribute dynamisch verändern
...
<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>
