Blue Flower

Hier ist ein Auszug aus meinem Buch

jQuery - Das universelle JavaScript-Framework für dasinteraktive Web und mobile Anwendungen 

 
Erschienen Febr. 2014 beim Carl Hanser Verlag
 
 Ralph Steyer  - jQuery - Das universelle JavaScript-Framework für das interaktive Web und mobile Anwendungen
Ralph Steyer - jQuery - Das universelle JavaScript-Framework für das interaktive Web und mobile Anwendungen
 
ISBN (Buch): 978-446-43941-2
ISBN (EBook): 978‐3‐446‐43949‐8 (ISBN: 978-3-446-43949-8)
 

 


 

1.
Sprung ins kalte Wasser

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[1] sein, um nicht
vom Stock zum Stöckchen zu kommen. Wir wollen möglichst schnell zur Praxis mit
jQuery kommen und erst einmal spielen. Und das bedeutet Beispiele erstellen.

1.1
Zugriff auf Elemente und Schutz des DOMs

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 zu Verfügung, über die so ein Zugriff mit einer verkürzten,
vereinheitlichte 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 DOMs. 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. 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 Problemen Herr zu werden. Und was Ihnen das Beispiel quasi nebenbei noch
zeigt ist, wie Sie auf 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.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 von einem eigenen Verzeichnis 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). Letztes 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 hier kurz angeben wollen (sie spielt aber im Grunde keine
Rolle):

Listing 1.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;

}

CHV_BOX_ID_01

icn001

Praxistipp

Die
CSS-Datei befindet sich in einem Unterverzeichnis lib
des Projektverzeichnisses, in dem die Webseite gespeichert wurde. Wobei
dieses noch ein weiteres Unterverzeichnis css
enth
ält,
worin dann konkret die Datei gespeichert ist. Wenn wir mit externen
JavaScript-Dateien arbeiten werden, werden diese dann in einem
Unterverzeichnis js von dem
Unterverzeichnis 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.

 

Bild 1.1            Die Projektstruktur - hier im Projektmappen-Explorer vom Visual Studio gut zu
sehen

In den Zeilen hinter der Referenz auf die externe
CSS-Datei sehen Sie die Referenz auf eine externe JavaScript-Datei – die
jQuery-Bibilothek, 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 so genannte ID eines Elements verwendet.

CHV_BOX_ID_02

icn002

Hinweis

Beachten
Sie, dass ein Element (im Sinn 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.

CHV_BOX_ID_02

icn002

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.

CHV_BOX_ID_02

icn002

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 so genannte 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.

CHV_BOX_ID_02

icn002

Hinweis

Die
Methode

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

 

Bild 1.2            Die Webseite mit den drei Button – der Anwender hat die dritte Schaltfläche
angeklickt

CHV_BOX_ID_02

icn002

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.

 

1.2
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ört 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 1.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 1.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 jeweils
mit einer Trennlinie abgegrenzt wird. Das ist pures HTML. Im Head finden Sie
wieder die Verknüpfung mit der CSS-Datei (nicht abgedruckt).

Bild 1.3            Die Seite nach dem Laden

Das Aussehen von dem Text 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 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. Und das 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 so 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.

CHV_BOX_ID_01

icn001

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.

 

1.3
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 1.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, 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 1.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. Wie
Sie sicher erkennen taucht als Parameter eine Zeitangabe auf. Dies legt fest
wie lange  die Animation benötigen soll. Man kann in den 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 Bildes nachvollziehen
werden Sie sehen, dass beim Verkleinern das Bild in der Höhe und Breites
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 Bildes 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.


1.4
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 von
einem Attribut abfragen, geben Sie nur den Namen des Attributs als
String-Parameter an.

CHV_BOX_ID_01

icn001

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 Kommata getrennt
weitere Wertepaare notieren.

 

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

Listing 1.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.


 

Zusammenfassung

Sie haben in dem Kapitel erst einige wenige Beispiele
gesehen, die aber schon recht gut entscheidende Key facts von jQuery
demonstriert haben. Sie sollten insbesondere sich 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.

Die Autorenseiten von Ralph Steyer bei Amazon

 


[1]
Aber keinesfalls unwichtig.