Zu allererst solltet ihr eine neue Javascript-Datei in euer Dokument einbinden. Entweder indem ihr eine neue Javascript-Datei direkt in euer HTML einbindet oder – wenn ihr beispielsweise WordPress benutzt – über die Datei functions.php in eurem WordPress-Theme. Eine entsprechende Anleitung haben wir in einem älteren Artikel zur Verfügung gestellt. Wer keinen Zugriff auf die Datei functions.php hat, kann auf ein Plugin zurückgreifen. Das Plugin „Simple Custom CSS and JS“ erlaubt das einfache Anlegen von neuen Javascript-Dateien direkt aus dem WordPress-Administrationsbereich heraus.

An dieser Stelle veröffentlichen wir zuerst einen „Happen“ Code. Anschließend wird dieser natürlich etwas genauer unter die Lupe genommen. Nur wer das Prinzip versteht, kann den Code anschließend seinen Bedürfnissen entsprechend erweitern und anpassen.

Um sicher zu gehen, dass der gesamte DOM-Baum – also das gesamte HTML der Website – geladen wurde, „packen“ wir die entsprechenden Code-Schnipsel in eine so genannte Wrapper-Funktion:

Unsere Javascript-Anweisungen befindet sich in .ready() – Diese jQuery-eigene Funktion stellt sicher, dass der darin enthaltene Code auch nur ausgeführt wird, wenn alles…ready ist. Anschließend können wir genau selektieren welche Elemente mit einer neuen Klasse ausgestattet werden sollen.

jQuery funktioniert wie eine Verkettung von Anweisungen. Zuerst bezeichnet man einen so genannten Selektor. Auf Basis dieses Selektors werden alle Elemente ausgewählt, die von diesem Selektor „abgegriffen“ werden. In unserem Falle haben wir alle Paragraphen innerhalb des DIV-Elementes mit der Klasse „entry-content“ ausgewählt. Auffällig und praktisch: Die jQuery-Selektoren funktionieren genau wie ihre Pendants in CSS. Anders ausgedrückt: Wer sich mit CSS-Selektoren auskennt, wird keine Schwierigkeiten haben, in jQuery eine passende Auswahl zusammen zu stellen.

Mit der jQuery-Funktion .first() können wir nun das erste Element in der Auswahl „heraus picken“. die Verkettung in jQuery ist also recht simpel. Hinter dem Selektor wird die Funktion „angekettet“ und durch jQuery ausgeführt.

Zu guter Letzt können wir nun mit addClass() eine Klasse hinzufügen. Das Schöne an dieser Funktion ist, dass bereits vorhandene Klassen erhalten bleiben. Es wird also nichts entfernt oder ersetzt, nur hinzugefügt. Auch in diesem Falle wird die jQuery-Funktion addClass() als letztes Element in der Kette notiert. Abgeschlossen wird mit einem Semikolon, damit jQuery weiß, dass hier die Operation beendet werden kann. Analog funktioniert das ganze statt mit .first() natürlich auch mit .last() – hiermit wird dann das letzte Element in der Auswahl ermittelt. Sobald die Klasse gesetzt wurde, kann via CSS formatiert werden.

Dieses erste Beispiel ist natürlich sehr simpel und soll nur als Beispiel herhalten, um das allgemeine Prinzip zu verdeutlichen. jQuery kann natürlich deutlich mehr. Hier eine kleine Auswahl praktischer jQuery-Funktionen, die einfach anzuwenden sind:

.after()

fügt beliebige HTML-Anweisung hinter die Auswahl an – also nach dem schließenden End-Tag. In diesem Falle wird also <p>Test</p> hinter jeden Absatz in der Auswahl platziert. Analog dazu kann man mit .before() diesen Paragraphen vor das Element platzieren.

Mit der jQuery-Methode appendTo() kann man beliebige neue Inhalte in Elemente verschachteln. Während after() Inhalte hinter ein schließendes Element platziert, kann man dank appendTo() also beliebigen Code innerhalb eines anderen Elementes platzieren. In unserem Beispiel wird jedem Paragraphen („p“) innerhalb des Elementes mit der Klasse „.entry-content“ nun <p>Test/p> hinzugefügt – unmittelbar vor dem schließenden End-Tag (und nicht hinter das schleißende End-Tag – wie es bei after() der Fall wäre). Alternativ kann man auch die Funktion prependTo() nutzen, wenn man die Auswahl nach dem öffnenden Tag setzen möchte.

Mit der Funktion attr() kann man bequem HTML-Attribute auslesen. Ein klassisches Anwendungsbeispiel? Möchte man Alt-Attribute von Bildern („img“) auslesen, kann man diese mittels attr() auslesen und verwerten. Die Funktion attr() erlaubt nicht nur das Auslesen von Attributen. Mit ihr kann man auch Attribute setzen. Mit removeAttr() kann man wiederum HTML-Attribute entfernen.

Mit den beiden Funktionen .parent() und .children() kann man beliebig im DOM bzw. Dokumenten-Baum „traversieren“ bzw. entlang wandern. In unserem Beispiel können wir einmal mit parent() das Eltern-Element unserer Auswahl „.entry-content a“ auswählen und einmal mit children() die entsprechenden untergeordneten Kind-Elemente (also die Listen-Elemente „li“).

Vor allem parent() ist besonders praktisch, da es mit CSS aufgrund der Kaskadierung nicht möglich ist Eltern-Elemente anzusprechen. So kann man in der Praxis in Kombination mit addClass() einem beliebigen Eltern-Element eine Klasse hinzufügen.

Diese Funktion schreibt Inline-CSS direkt in das ausgewählte Element. Das ist praktisch, nach Möglichkeit sollte aber aus Performance-Gründen eher via addClass() eine Klasse hinzugefügt werden, die anschließend via CSS angesprochen werden kann. Die Funktion .css() ist dann praktisch, wenn das simple Setzen einer Klasse nicht zielführend wäre, bzw. man  einem HTML-Element „aus dem Script heraus“ passende dynamische Werte zuteilen möchte. Ein klassisches Beispiel sind Höhen-Angaben, die sich zur Laufzeit des Scripts ständig ändern. Eine „statische“ CSS-Klasse zu setzen, würde an dieser Stelle keinen Sinn ergeben.

Mit den beiden jQuery-Funktionen empty() und remove() lassen sich prima Aufräumarbeiten durchführen. Während empty() alle Inhalte innerhalb einer Auswahl entfernt, entfernt remove() das selektierte Elemente gänzlich – inklusive Inhalte.

Die Funktionen hide() und show() können Elemente verstecken bzw. anzeigen. Im Gegensatz zu der Funktion remove() wird die Auswahl aber nicht gänzlich aus dem DOM entfernt. Stattdessen wird das Element ausgeblendet. Das CSS-Pendant zu hide() ist display: none, während das Pendant zu show() display:block ist.

Die Funktion hasClass() ist eine Überprüfungs-Funktion. Das klingt etwas sperrig, ist aber schnell erklärt: Die Funktion prüft ob eine Klasse gesetzt ist und führt insofern dies der Fall ist eine weitere Aufgabe durch. So kann man prüfen ob beispielsweise eine Klasse gesetzt ist um das zutreffende Element auszublenden mit der Funktion hide().

Die beiden Funktionen wrap() und unwrap() sind ebenfalls sehr praktisch. Mit wrap() lässt sich eine Auswahl mit einem neuen Eltern-Element „umspannen“. Die Funktion unwrap() hingegen entfernt das Eltern-Element.

Wer einmal das Grundprinzip der Verkettung von Funktionen in jQuery verstanden hat, kann bereits sehr viel mit einfachen Mitteln umsetzen. Natürlich geht jQuery deutlich weiter. So lassen sich mit jQuery komplexe Aufgaben mittels Schleifen und verschachtelten Funktionen realisieren, die wiederum bei Klicks oder anderen „Events“ ausgelöst werden. Da sich dieser Artikel aber klar an Einsteiger richtet, sollte an dieser Stelle lediglich gezeigt werden, wie man auch als Einsteiger schnell Erfolge feiern und zahlreiche Probleme, die durch CSS alleine nicht zu lösen sind, mittels weniger Code-Zeilen in den Griff bekommen kann.

Was sind eure Lieblings-jQuery-Funktionen im Entwickler-Alltag? Schreibt uns eure Favoriten in die Kommentare!