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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…