Frisch notiert!

Die neusten Artikel aus unserem Blog.

Für Einsteiger: Spannende jQuery-Funktionen verständlich erklärt

Zuletzt aktualisiert am 22/12/2016 von Gino Cremer
1 Kommentar
Allgemein, Javascript
/ Allgemein / Javascript / 1

Gerade wer beispielsweise auf "fertige" WordPress-Themes setzt, hat früher oder später das Problem, dass er nicht zu weit in den Unterbau vordringen will, um grundlegende Dinge anzupassen. Vielleicht möchte man irgendwo eine Linie hinzufügen oder eine Farbe verändern. Aber selbst tiefgreifendere Änderungen sind möglich, wenn man eine Prise jQuery mit CSS kombiniert. Wir zeigen wie man ganz einfach via jQuery / Javascript neue Klassen hinzufügt, die anschließend via CSS zu Styling-Zwecken genutzt werden können und welche Funktionen jQuery noch zu bieten hat, die leicht zu erlernen sind und im Entwickler-Alltag wertvolle Hilfe leisten können.

Kleiner Hinweis zum Start: Bevor ihr via JavaScript oder jQuery Klassen hinzufügt, stellt euch grundlegend die Frage, ob dieser Schritt wirklich notwendig ist oder ob nicht direkt via CSS das Problem gelöst werden kann. Das ist deutlich performanter.

Einbinden einer neuen Javascript-Datei

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.

Der vollständige jQuery-Code zum Hinzufügen von Klassen

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.

$(document).ready( function() {

// Dem ersten und dem letzten Paragraphen eine Klasse hinzufügen
$('div.entry-content p').first().addClass('first-p');
$('div.entry-content p').last().addClass('last-p');

});

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:

$(document).ready( function() {

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.

$('div.entry-content p')

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.

$('div.entry-content p').first()

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.

$('div.entry-content p').first().addClass('first-p');

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.

Weitere praktische jQuery-Funktionen

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() und .before()

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

$('div.entry-content p').after( "<p>Test</p>" );

appendTo() und preprendTo()

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.

$( '<p>Test</p>' ).appendTo( '.entry-content p' );

.attr() und .removeAttr()

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.

$( 'img' ).attr('alt'); // Liest das Alt-Attribut des Bildes aus
$( 'img' ).attr( 'alt', 'Alternativtext' ); // Setzt als Alt-Attribut "Alternativtext" für alle Bilder.

.parent() und .children()

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.

$( '.entry-content a' ).parent().addClass('eltern'); // Selektiert das Eltern-Element und gibt ihm die Klasse ".eltern"
$( '.entry-content a' ).children(); // Selektiert die Kind-Elemente der A-Tags / Links in .entry-content

.css()

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.

$( '.entry-content div' ).css('height','100px'); // ergibt im HTML <div style="height: 100px;"> für jedes Div-Element innerhalb von .entry-content

empty() und remove()

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.

$( '.entry-content div' ).remove(); // Entfernt alle Div-Elemente innerhalb von .entry-content
$( '.entry-content div' ).empty(); // Leert alle Div-Elemente in .entry-content

show() und hide()

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.

.hasClass()

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().

$( '.entry-content div' ).hasClass('versteckmich').hide(); // Prüft ob ein Div die Klasse ".versteckmich" hat. Verstecke das Element mit hide() wenn "ja". 

wrap() und unwrap()

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.

$( '.entry-content p' ).wrap( '<div class="neues-elternelement"></div>' ); // Spannt einen neuen Div rund um jeden Paragraphen p. 
$( '.entry-content p' ).unwrap(); // Entfernt das Eltern-Element eines jeden Paragraphen.

Fazit: jQuery macht einfache Operationen zum Kinderspiel

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!

Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen. Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde. Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

1 Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert