Teil 5: Workshop Javascript-Bibliothek: Einstieg in jQuery

1. Workshop Javascript-Bibliothek: Einstieg in jQuery
2. Teil 2: Workshop Javascript-Bibliothek: Einstieg in jQuery
3. Teil 3: Workshop Javascript-Bibliothek: Einstieg in jQuery
4. Teil 4: Workshop Javascript-Bibliothek: Einstieg in jQuery
5. Teil 5: Workshop Javascript-Bibliothek: Einstieg in jQuery
6. Teil 6: Workshop Javascript-Bibliothek: Einstieg in jQuery
7. Teil 7: Workshop Javascript-Bibliothek: Einstieg in jQuery
8. Teil 8: Workshop Javascript-Bibliothek: Einstieg in jQuery

$('#wechsel').mouseover(function() {
$('#bild').attr('src', 'b2.jpg');
});
$('#wechsel').mouseout(function() {
$('#bild').attr('src', 'b1.jpg');
});

Für mouseover() und mouseout() gibt es auch eine Abkürzung: hover(). hover() erwartet zwei anonyme Funktionen, in denen Sie angeben, was jeweils geschehen soll.

$('#wechsel').hover(
function() {
$('#bild').attr('src', 'b2.
jpg')},
function() {
$('#bild').attr('src', 'b1.jpg');
});

Wenn der Bildwechsel allerdings so einfach ist wie im Beispiel, sollten Sie das besser über CSS-Hintergrundbilder realisieren und nicht Javascript bemühen.

Versteckspiele

Häufig möchte man die Anzeige verändern, etwas anzeigen lassen, was vorher nicht sichtbar war, oder umgekehrt. hide() zum Verbergen von Elementen haben Sie bereits kennengelernt - entsprechend zeigt show() ein vorher verborgenes Element wieder an. Zum Verbergen und Anzeigen wird die CSS-Eigenschaft display genutzt.

Damit Ihre Seite auch bei deaktiviertem Javascript benutzbar bleibt, sollten Sie Elemente, deren Sichtbarkeit Sie verändern wollen, erst per Javascript ausblenden und bei Bedarf dann wieder einblenden. Wenn Sie hingegen schon zu Beginn das Element über CSS display:none ausblenden und erst per Javascript wieder einblenden, ist die Information bei deaktiviertem Javascript nicht zugänglich.

Zum abwechselnden Ein- und Ausblenden von Elementen gibt es eine Kurzform: den Befehl toggle(). Durch toggle() werden Elemente, die derzeit versteckt sind, angezeigt, derzeit sichtbare Elemente werden hingegen versteckt.

Nehmen wir an, ein Inhaltsverzeichnis soll über Klick ein- und ausgeblendet werden. Der zugehörige HTML-Code sieht so aus:

<h2 class="verz">Inhaltsverzeichnis</h2><ul><li>Punkt 1</li><li>Punkt 2</li></ul>

Per Klick auf die Überschrift soll das Inhaltsverzeichnis verschwinden, bei einem erneuten Klick hingegen wieder eingeblendet werden:

$('.verz').click(function() {
$(this).next().toggle();
});

Sehen wir uns den Code genauer an: Für alle Elementen mit der Klasse verz wird per click() eine Funktion an das Klickereignis gebunden. Bei Klick wird die anonyme Funktion ausgeführt.

© Archiv

In dieser greifen Sie über $(this) - der jQuery-Variante von this - auf das aktuell ausgewählte Element zu. Per next() wird das nächste HTML-Element ausgewählt. In diesem Fall ist das die ungeordnete Liste. toggle() sorgt dann für das abwechselnde Anzeigen und Verstecken.

Sollen die Unterpunkte bereits zu Beginn eingeklappt sein, dann ergänzen Sie am Ende noch .next().hide(). Damit verstecken Sie am Anfang das auf die Überschrift folgende Element.

$('.verz')
.click(function() {
$(this).next().toggle();
})
.next()
.hide();