Universitätsrechenzentrum
jQuery

Selektoren und Filter

Selektoren beschreiben die Auswahl eines oder mehrere Elemente im DOM-Baum einer Webseite.

Für die weitere Darstellung nutzen wir CSS-Eigenschaften zum Hervorheben der selektierten Elemente. Die Funktionalität ist aber nicht darauf beschränkt.

Einfache Selektoren

  • a --- Alle Elemente vom angegebenen Type, hier alle Links <a>
  • #myid --- Das Element mit der ID myid. Normalerweise sind IDs im Dokument eindeutig sodass genau ein Element zurückgegeben wird, aber fehlerhafte Dokumente und fehlertolerante Browser können auch ein Array aus mehreren Elementen liefern.
  • .myclass --- Alle Elemente der Klasse myclass
  • .classA .classB --- Alle Elemente, welchen die Klassen classA und classB zugewiesen sind
  • * --- Alle Elemente des Dokuments
  • Selektor1, Selektor2, ... Alle Elemente auf welche mindestens ein aufgezählter Selektor passt

Sonderzeichen in Selektoren werden mit einem Backslash \ maskiert.

Hierarchische Selektoren

Über hierarchische Selektoren lassen sich Elemente, welche in Beziehung mit anderen Elementen stehen adressieren.

  • ElementA ElementB --- Alle B-Elemente, welche innerhalb von ElementA eingebettet sind
  • Eltern > Kind --- Alle direkten Kind-Elemente des Eltern-Elements
  • ElementA + ElementB --- Alle B-Element, welche direkt auf ein A-Element folgen
  • ElementA ~ ElementB --- Alle B-Element, welche Geschwister von ElementA sind

Beispiele

jQuery-Selektor Beschreibung
$("*") Alle Elemente des Dokuments
$("a") Alle Links <a>
$("#myid") Das Element mit der ID myid, <div id="myid">Hier steht Inhalt ...</div>
$(".myclass") Alle Elemente der Klasse myclass, Bsp: <span class="myclass">Hier steht Inhalt ...</span>
$("th,td") Die Elemente <th> und <td>
$("p a") Alle Links <a> innerhalb eines Absatz <p>
$("p.myclass") Alle Absätze der Klasse myclass, <p class="myclass">Der Absatz ...</p>
$("div > img") Alle Bilder, welche direkte Kinder von <div>-Elementen sind
$("label+input") Alle <input> -Elemente., welche nach einem <label> -Element folgen
$("td~td") Alle <td> -Elemente, welche ein <td> -Element als Vorgänger habe

Methoden

Das jQuery-Objekt stellt für die Behandlung der Elementauswahl Methoden bereit.
Methoden können wiederum verkettet werden.

size()

Liefert die Anzahl der Elemente, welche durch die Auswahl beschrieben sind. 

<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
   // we will add our javascript code here
   $(document).ready(function() {
      $("#output").html("Das Dokument enthält: " + $("a").size() + " Links.");
   });
</script>

... html code mit Links ..

<div id="output"></div>

get()

Liefert ein indiziertes Element oder die gesamte Auswahl aus JavaScript-Array.
Beispiel: Das erste Bild im Dokument, welches ein alt -Attribut enthält. 

$("img[alt]").get(0);

index(element)

Liefert von einer Elementauswahl den Array-Index eines bestimmten Elementes oder -1.
Beispiel: Welchen Index hat der Absatz mit der ID absatz_2 aus der Auswahl aller Absätze? 

$("p").index($("p#absatz_2"));

add(expression)

Fügt 2 Selektoren zu einer Elementauswahl zusammen.
Beispiel: Alle Absätze und Anstriche ... 

$("p").add("li")

not(expression)

Einschränkung die Auswahl anhand des angegeben Ausdrucks ein. 

$("li").not(:contains("Text"));

filter(expression)

Analog der Verkettung von jQuery-Ausdrücken. 

$("img").filter("[title*=Text]"));

slice(begin, end)

Definiert einen Ausschnitt des jQuery-Arrays, welches die selektierten Elemente enthält.
Beispiel: Die Anstriche 1 bis 3. 

$("li").slice(0,2));

Einfache Filter

Filter dienen der weiteren Spezifikation für Selektoren.
Filter können wie Selektoren verkettet werden. Das Voransetzen eines Selektors ist nicht zwingend notwendig.

Filter Beschreibung
li:first Der erste vorkommende Anstrich <li> im Dokument
li:last Der letzte vorkommende Anstrich <li> im Dokument
img:not(img:first) Alle Bilder im Dokument außer dem ersten Bild
tr:even Alle geraden Tabellenzeilen
tr:odd Alle ungeraden Tabellenzeilen
li:eq(index) Der Anstrich <li> mit dem Index index
li:gt(index) Alle Anstriche <li> mit dem Index größer als index
li:lt(index) Alle Anstriche <li> mit dem Index kleiner als index
:header Alle Überschriftenelemente (<h1>, <h2>, <h3>, ...)
img:animated Alle animierten Bilder

Inhalts-, Sichtbarkeits- und Attributfilter

Filter Beschreibung
:contains(Text) Alle Elemente, welche den angegeben Text enthalt.
*Beachte*, dass auch Elternelemente von Kindern auf welche der Ausdruck passt zurückgeliefert werden.
:empty Leere Elemente, z.B. Bilder enthalten kein Textattribut
li:has(a) Alle Anstriche <li>, welche einen Link <a> enthalten.
*Beachte*, dass auch Elternelemente zurückgeliefert werden.
:parent Alle Elemente, welche Eltern sind. Dazu gehört beispielsweise auch ein Absatz, welcher nur Text enthält.
:hidden Alle nicht sichtbaren/ausgeblendeten Elemente. Dazu gehören beispielsweise auch <head> und <script>-Elemente.
:visible Alle sichtbaren Elemente.
$(img[alt]) Alle Bilder mit einem alt -Attribut
$(img[title][title!="Hecht"]) Alle Bilder mit einem title -Attribut, außer der Inhalt des title -Attribut passt auf Hecht
$(a[href^="http://"]) Alle externen Links, beginnend mit http://
$(a[href*="wikipedia"]) Alle Links, welche wikipedia enthalten
$(img[src$="gif"]) Alle Bilder vom Type gif
$(input[type="text"]) Alle Formularfelder vom Typ: text

Elter-, Kindfilter

Filter Beschreibung
:nth-child(index) Die Elemente, welche die n-ten Kinder sind. (Auch: even, odd möglich)
:first-child Die jeweils ersten Kindelemente
:last-child Die jeweils letzten Kindelemente
:only-child Alle Einzelkinder

Filter für Formularelemente

Speziell für Formularelemente <input> existieren Filter zum selektieren nach Typ des Elements und nach Zustand.

Filter Beschreibung
:input Alle Formularelemente (<input>, <textarea>,<select>, <button> )
:text  
:password  
:radio  
:checkbox  
:submit  
:image  
:reset  
:button  
:file  
:enabled Alle aktivierten Formularelemente
:disabled Alle deaktivierten Formularelemente
:checked Alle Checkboxen, welche den Status checked haben
:selected Liefert das <option>-Element von <select>-Elementen

weitere Methoden

Verschiedene jQuery-Filter sind auch als Methoden des jQuery-Objekts verfügbar.

find(selector)

Sucht innerhalb einer Elementauswahl nach Kindern, auf welche der definierte Ausdruck passt.
Beispiel: Finden in allen Absätzen ein Element mit der ID lorem. 

$("p").find("#lorem");

is(selector)

Prüft innerhalb einer Elementauswahl, ob ein durch eine weitere Elementauswahl definiertes Element enthalten ist.
Beispiel: Enthält das Dokument eine oder mehrere Tabellen? 

if ($("*").is("table")) {
   $("#output").html("Das Dokument enthält Tabelle(n).");
}

Beispiel: Ist die Checkbox mit der ID checkbox1 angekreuzt? 

if ($("#checkbox1").is(":checked")) {
   $("#output").html("checkbox 1 ist angekreuzt.");
}

TUCaktuell