Mehr Effizienz bei weniger Aufwand

Teil 5: Workshop Javascript-Bibliothek: Einstieg in jQuery

21.8.2009 von Redaktion pcmagazin

ca. 1:45 Min
Ratgeber
  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.

Javascript-Bibliotheken
jQuery-Erweiterungen für jeden Bedarf: plugins.jquery.com.
© 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();

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.