Mehr Effizienz bei weniger Aufwand

Teil 5: 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.

Javascript-Bibliotheken

© Archiv

jQuery-Erweiterungen für jeden Bedarf: plugins.jquery.com.

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();

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".