In diesem ersten Artikel möchte ich ein wenig über jQuery Selektoren schreiben. Ich finde jQuery ist eine der mächtigsten JavaScript Funktionssammlungen und möchte diese gerne mehr Benutzern nahebringen. Mir persönlich gefällt besonders, dass ich durch die Selektoren nicht wieder etwas Neues lernen muss, sondern durch mein bereits bestehendes Wissen über CSS-Selektoren sofort anfangen kann.
Die Selektoren von jQuery basieren auf denen von CSS in Version 1 bis Version 3. Dabei lassen sich, ebenso wie in CSS, verschiedene Selektoren um ein Element zu beschreiben beliebig kombinieren und verschachteln. Wichtig dabei zu wissen ist, dass jQuery immer ein Array von Elementen zurückgibt. Warum dies so ist, werde ich weiter unten noch erläutern.
Da ja bekanntlich viele Wege nach Rom führen, gibt es auch mehrere Möglichkeiten, um an ein bestimmtes Element heranzukommen. Wir wollen im folgenden Beispiel das SPAN-Element mit dem ID-Attribut "finde-mich" erhalten:
HTML:
<p><div><br>
<span id="finde-mich">Finde Mich!</span><br>
<table><br>
<tbody><br>
<tr><br>
<td><br>
<span>Mich findet man nicht</span><br>
</td><br>
</tr><br>
</tbody><br>
</table><br>
</div>p>JavaScript:
jQuery("#finde-mich");<br>
$("#finde-mich");p>
Beide JavaScript Anweisungen würden in diesem Fall das SPAN-Element liefern. Genau wie in CSS kann man auch mit jQuery ein Element, welches mit einem ID-Attribut versehen ist über den #-Selektor (ID-Selektor) finden. In den folgenden Beispielen werde ich der Einfacheit halber nur noch die $-Funktion verwenden.
Bei verschachtelten Selektoren findet jQuery - wie auch CSS - alle Elemente, welche in dem übergeordneten Element vorkommen.
JavaScript:
$("div span");</p>
Diese Anweisung findet somit nicht nur das erste SPAN-Element, sondern auch alle weiteren in einem DIV-Element enthaltenen SPAN-Elemente, denn auch das zweite SPAN-Element ist in einem DIV-Element enthalten.
Man kann jQuery sowie CSS jedoch auch dazu zwingen, nur genau eine Ebene tiefer zu schauen.
JavaScript:
$("div > span");</p>
Diese Anweisung würde nur genau eine Ebene tiefer suchen und findet demnach nur das direkt im DIV-Element verschachtelte SPAN-Element. Das zweite SPAN-Element welches in der Tabelle verschachtelt wurde kann nicht mehr gefunden werden, da dies nicht nur eine Ebene tiefer liegt.
Kommen wir also einmal zu etwas komplizierteren Selektoren denn jQuery ist deutlich mächtiger als nur ein paar einfache Elemente zu finden. Zuerst benötigen wir jedoch ein wenig mehr HTML-Markup.
HTML:
<p><table id="tabelle"><br>
<thead><br>
<tr><br>
<th>#</th><br>
<th>Vorname</th><br>
<th>Artikel</th><br>
</tr><br>
</thead><br>
<tbody><br>
<tr class="row"><br>
<td>1.</td><br>
<td>Benjamin</td><br>
<td>4</td><br>
</tr><br>
<tr class="row"><br>
<td>2.</td><br>
<td>Jasmin</td><br>
<td>3</td><br>
</tr><br>
<tr class="row"><br>
<td>3.</td><br>
<td>Dennis</td><br>
<td>1</td><br>
</tr><br>
<tr class="row"><br>
<td>4.</td><br>
<td>Rian</td><br>
<td>0</td><br>
</tr><br>
</tbody><br>
</table>p>JavaScript:
$("#tabelle tbody tr.row")</p>
Dieser Selektor liefert uns jede Tabellenzeile der Tabelle "#tabelle" mit der CSS Klasse "row". Genau wie in CSS ist auch bei den jQuery Selektoren der Class-Selektor mit einem Punkt (.) definiert. Zum ersten Mal sehen wir hier auch die Verkettung von Selektoren. Wir haben hier den HTML-Tag Selektor "tr" mit dem Class-Selektor ".row" verkettet, um alle TR-Elemente mit der CSS-Klasse ".row" zu erhalten.
Neben den ganz normalen CSS-Selektoren gibt es in jQuery noch diverse Pseudo-Selektoren. Mit diesen kann man z.B. alle INPUT-Elemente (:input) oder alle geraden bzw. ungeraden Elemente in der Auflistung (:even bzw. :odd) finden.
Wenn wir nun einmal den :odd bzw. :even Pseudo-Selektor auf das obige Beispiel anwenden wollen, könnte man z.B., um die Lesbarkeit der Tabelle zu erhöhen, jeder 2ten Zeile eine andere Hintergrundfarbe geben. Ab hier ist es nun wichtig zu wissen, dass jQuery immer ein Array von Elementen zurückgibt.
JavaScript:
$("#tabelle tbody tr:odd").css("background-color", "blue");</p>
Diese Zeile verpasst jeder ungeraden Tabellenzeile eine blaue Hintergrundfarbe. ".css()" ist hierbei eine jQuery Funktion. Nur bei wenigen Funktionen wird kein solches Array zurückgegeben und meist liefern selbst die Funktionen, welche Änderungen an den Elementen durchführen, das Ursprungs-Array zurück. Daher kann man auch einzelne Befehle miteinander verketten, ohne jedesmal den Selektor neu auszuführen.
JavaScript:
$("#tabelle tbody tr:odd")
.css("background-color", "blue")
.css("color", "white")
.addClass("odd")
.removeClass("row");</p>
Dieses JavaScript würde jeder ungeraden Tabellenzeile einen blauen Hintergrund verpassen, die Textfarbe auf "weiß" stellen, dem TR-Element selbst eine CSS-Klasse "odd" hinzufügen und die CSS-Klasse "row" vom TR-Element entfernen.
Abschließend hoffe ich, dass dieser Artikel wenigstens einigen Startern nützt, einen schnelleren jQuery Einstieg zu finden.
WhatsApp
