Mehr Effizienz bei weniger Aufwand

Teil 4: Workshop Javascript-Bibliothek: Einstieg in jQuery

Um mehrere Werte gleichzeitig zu ändern, können Sie css() auch ein Objektliteral übergeben. Das bedeutet, Sie notieren innerhalb der runden Klammern hinter css geschweifte Klammern mit Ihren Angaben: Zwischen Eigenschaft und Wert steht jeweils ein Doppelpunkt, zwischen den Eigenschaft-Wert-Paaren ein Komma. Übersichtlicher sieht es aus, wenn man die Eigenschaften jeweils auf mehrere Zeilen verteilt.

$('p').css({
'background-color': 'yellow',
'border': '2px dotted blue',
'width': '800px',
'padding': '10px'
});

Wenn Sie die CSS-Eigenschaften auf diese Art setzen, ist das vergleichbar mit der direkten Zuweisung von CSS-Eigenschaften zu Elementen über das style-Attribut. In vielen Fällen ist es eleganter, per jQuery eine Klasse über addClass() hinzuzufügen und die Formatierungen in der CSS-Datei zu definieren: So vermischen sich CSS-Code und Javascript-Code nicht.

Actio & Reactio

Auch für die Reaktion auf Benutzerereignisse, das heißt beim Abfangen von Ereignissen/Events, bietet jQuery seine Unterstützung. Wenn Sie selbst mit Javascript-Events gescriptet haben, wissen Sie, wie mühsam das ist, da der Internet Explorer ein anderes Event-Modell hat. Glücklicherweise berücksichtigt jQuery all diese Unterschiede und Sie brauchen keine Zeit mehr darauf zu verwenden.

Folgendermaßen definieren Sie, dass beim Klick auf ein Element mit id="zeigen" eine Meldung ausgegeben wird:

$('#zeigen').click(function() {
alert('Hallo');
});

Sie notieren also .click() hinter dem Ausdruck zur Auswahl des gewünschten Elements und übergeben click() eine anonyme Funktion. Genauere Erläuterungen zu anonymen Funktionen, die in jQuery intensiv genutzt werden, finden Sie im Kasten.

Sehen wir uns jetzt an, wie Sie Pop-up-Fenster per jQuery realisieren. Dazu kennzeichnen Sie die Links am besten mit einer Klasse.

<a href="info.html" class="popup">
mehr Informationen</a>

Beachten Sie: Innerhalb des Links steht keinerlei Javascript-Code.Zum Öffnen von neuen Fenstern dient wie immer in Javascript der Befehl open(). Diesem übergeben Sie als ersten Parameter die URL des neuen Fensters, dann den Namen und schließlich einen String mit den gewünschten Eigenschaften.Doch statt dies in einer Funktion auszulagern, die Sie bei onclick im Link aufrufen, weisen Sie mit jQuery allen Links mit der entsprechenden Klasse click() zu und definieren über eine anonyme Funktion, was geschehen soll.

Javascript-Bibliotheken

© Archiv

Accordion-Plugin ermöglicht die Accordion-Funktionalität mit ein paar Zeilen Code.
$('.popup').click(function() {
open(this.href, 'f',
'height=400, width=400, resizable=yes, scrollbars=yes');
return false;
});

Wenn Sie Pop-up-Fenster auf diese Art programmieren, bleibt der HTML-Code unverändert und frei von Javascript-Befehlen. Durch diese Trennung von Struktur (HTML) und Verhalten (Javascript) lässt sich der Code besser warten und diese Trennung ist eine wichtige Komponente von unobtrusive Javascript.

Bildwechsel mit jQuery

Absehen vom Klicken können Sie natürlich auch auf alle sonst üblichen Events reagieren: So gibt es beispielsweise mouseover() und mouseout() für Mausereignisse. Damit lässt sich leicht ein Bildwechsel realisieren. Zuerst der HTML-Code:

<a href="#" id="wechsel"><img src=
"b1.jpg" id="bild" alt="Bild" /></a>

Per jQuery wählen Sie dann das Element mit der id="wechsel" aus und definieren in einer anonymen Funktion, was beim Mouseover und beim Mouseout geschehen soll. In unserem Beispiel wird über den Befehl attr() der Inhalt des Attributs src jeweils auf die gewünschte Bildquelle gesetzt.

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​".