Mehr Effizienz bei weniger Aufwand

Teil 3: Workshop Javascript-Bibliothek: Einstieg in jQuery

Mit jQuery erledigen Sie die Zuweisung der Klasse zu jeder zweiten Zeile dynamisch:

$('.datentabelle tr:nth-child
(even)').addClass('gerade');

Durch diesen Befehl erhält jede zweite Zeile innerhalb eines Elements mit der Klasse .datentabelle die Klasse .gerade, die Sie dann per CSS einfärben können.

.gerade { background-color: #ddd; }

Neben den aus CSS 2.1 oder auch CSS 3 bekannten Selektoren gibt es auch jQuery- spezifische Ausdrücke zur Auswahl von Elementen: Beispielsweise erleichtern mehrere Ausdrücke die Arbeit mit Formularelementen.

So wählt etwa :text alle Textfelder aus oder :password die Passwortfelder. Außerdem gibt es weitere Befehle, um im DOM-Baum zu navigieren, wie next() zur Auswahl des folgenden Elements oder parent() zur Auswahl des Elternelements und viele mehr.

Mit den angegebenen Selektoren wählen Sie oft nicht nur ein, sondern mehrere Elemente aus. jQuery wendet dann automatisch die Befehle, die Sie angeben, auf alle Elemente an. So werden im Beispiel eben über $('.unsichtbar').hide(); alle Elemente mit der Klasse unsichtbar ausgeblendet.

Wollen Sie hingegen mit den einzelnen Elementen etwas Unterschiedliches machen, so können Sie mit each() durch die Elemente iterieren.

HTML-Code erzeugen

Hat man die Elemente ausgewählt, kommt man zur eigentlichen Bearbeitung. addClass() zur Ergänzung einer Klasse haben Sie bereits kennengelernt. Parallel dazu gibt es removeClass(), um eine Klasse zu entfernen, oder hasClass() zur Überprüfung, ob eine Klasse vorhanden ist.

Javascript-Bibliotheken

© Archiv

Der Anfangszustand der Animation ...

Den Inhalt von Elementen können Sie über den Befehl html() auslesen und ändern. Wenn Sie html() keinen Parameter übergeben, lesen Sie den Inhalt des ersten Elements aus:

var meintext = $('.beispiel').html();

Wenn Werte ausgelesen werden, so werden nicht alle Elemente angesprochen wie sonst, sondern nur das erste. Schreiben Sie bei html() hingegen Parameter, dann ersetzen Sie den ursprünglichen Inhalt durch den neu angegebenen und zwar bei allen ausgewählten Elementen:

$('.beispiel').html('ich bin neu
hier');

Weitere Befehle bieten sich an, wenn Sie Inhalte nicht ersetzen, sondern ergänzen wollen. Beispielsweise after(): Damit hängen Sie HTML-Code an den bestehenden an. Das ist unter anderem praktisch, um Fehlermeldungen bei Formularen direkt hinter dem Eingabefeld einzufügen.

Javascript-Bibliotheken

© Archiv

... und der Endzustand: die notwendigen Zwischenschritte macht jQuery automatisch.
$('input#email').after('<span class=
"fehler">Geben Sie Ihre E-Mail-Adresse ein!</span>');

Damit wird direkt hinter dem input-Element mit der id="email" ein span-Element mit der Fehlermeldung ergänzt.

before() macht das Gegenteil von after(): Es ergänzt Inhalte vor einem Element. Weitere Befehle wie append() und prepend() ergänzen innerhalb von Elementen Inhalte, das heißt innerhalb von Start- und Endtag. Auf Attribute greifen Sie über attr() zu. So liest das Folgende das src-Attribut des Bildelements mit der id="logo" aus:

var logo = $('img#logo').attr('src');

Der Befehl css() dient dazu, CSS-Eigenschaften eines Elements zu setzen oder auszulesen. Die folgende Zeile färbt die Schrift in allen p-Elementen rot ein.

$('p').css('color', 'red');

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