Anzeige
Tutorialbeschreibung

jQuery - Mit Selektoren arbeiten

jQuery - Mit Selektoren arbeiten

Nachdem man die jQuery-Bibliothek erfolgreich eingebunden hat, geht es mit der Arbeit erst so richtig los. Entscheidender Bedeutung kommt dabei den Selektoren zu. Denn mit denen lässt sich ganz gezielt auf einzelne Elemente des DOM (Document Object Model) zugreifen. In diesem Tutorial lernt ihr die Arbeit mit eben diesen Selektoren kennen. Das geschieht zunächst anhand von Beispielen, bevor dann einige grundlegende Dinge zum DOM beschrieben werden.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Will man per JavaScript auf ein bestimmtes Element des Dokumentenbaums zugreifen, verwendet man dafür üblicherweise eine der folgenden Methoden des document-Objekts: (Wobei hier sicherlich getElementbyID() die gebräuchlichste Variante ist).

  • getElementbyID()
  • getElementsByName()
  • getElementsByTagName()
Diese Methoden ermöglicht den Zugriff auf ein Element. Dafür muss man allerdings explizit dessen ID, Name oder den Tag-Namen angeben. Sollen hingegen in JavaScript beispielsweise alle a-Elemente geändert werden, kommt man nicht um den Einsatz von Schleifen herum. Dank jQuery lassen sich solche Aufgaben fortan ganz einfach lösen. Denn hier stellt sich das folgendermaßen dar:
$('a')

Wie sähe die Sache aber aus, wenn man mittels JavaScript alle div-Elemente ermitteln wollte, denen die Klasse bild zugewiesen wurde?
var bilder = document.getElementsByTagName('div');
for (i=0; i<bilder.length; i++) {
   if (/bild/.test(bilder[i].className)) {
      ...
   }
}

Deutlich einfacher lässt sich so etwas in jQuery umsetzen.
$('div.bild')



 
Welche Selektoren jQuery unterstützt, könnt ihr explizit in der jQuery-API unter http://docs.jquery.com/Selectors nachlesen.

Bilder



So gibt es neben den aus CSS bekannten Selektoren wie #id und .class beispielsweise auch hierarchische Varianten. Ja sogar inhaltsbezogene Selektoren sind vorhanden. So kann man durch
:empty

alle Elemente ermitteln, die keine Kindelemente besitzen.


 
Wie effektiv die jQuery-Selektoren tatsächlich sind, zeigt das folgende Beispiel:
<script type="text/javascript"> 
/* <![CDATA[ */

$(document).ready(function(){
var input = $("form input:radio").wrap('<span></span>').parent().css({background:"blue"});
   $("div").text("Es wurden " + input.length + " Radioboxen gefunden")
           .css("color", "blue");
   $("form").submit(function () { return false; }); 
});
/* ]]> */
</script>

Hier werden alle innerhalb des Dokuments enthaltenen Radio-Boxen ermittelt. Verwendet wird dafür die Anweisung $("form input:radio").
<div>
  <form>
    <input type="radio" name="news" />
    <input type="radio" name="news" />
    <input type="radio" name="news" />
  </form>
</div>
 
[Beispiel anzeigen]
 
Ausgeführt wird das Skript direkt beim Aufrufen der Seite. Das Ergebnis sieht folgendermaßen aus:

Bilder



Wie diese Abbildung zeigt, wird nicht nur die Anzahl der vorhandenen Radio-Boxen ausgegeben. Zusätzlich wurde auch die Hintergrundfarbe der Boxen angepasst. Und das alles mit sehr, sehr wenig Code.


 
Ähnlich einfach lassen sich die innerhalb eines Formulars enthaltenen und aktivierten Kontrollkästchen ermitteln.
<script type="text/javascript"> 
/* <![CDATA[ */
$(document).ready(function(){
   
    function jogger() {
      var n = $("input:checked").length;
      $("div").text(n + (n <= 1 ? " is" : " Mal") + " insgesamt");
    }
    jogger();
    $(":checkbox").click(jogger);
  });
/* ]]> */
</script>

Der eigentliche Dateikörper sieht folgendermaßen aus:
<body>
Wann gehen Sie Joggen?
    <form>
    Montag: <input type="checkbox" name="montag" checked="checked" value="mo" /><br/>
    Dienstag: <input type="checkbox" name="dienstag" value="di" /><br/>
    Mittwoch: <input type="checkbox" name="mittwoch" value="mi" /><br/>
    Donnerstag: <input type="checkbox" name="donnerstag" checked="checked" value="do" /><br/>
    Freitag: <input type="checkbox" name="freitag" value="fr" /><br/>
    Samstag: <input type="checkbox" name="samstag" value="sa" /><br/>
    Sonntag: <input type="checkbox" name="sonntag" value="so" />
  </form>
  <div></div>
</body>
 
[Beispiel anzeigen]
 
Besonders interessant ist an diesem Beispiel, dass die Funktion jogger() bei jedem Mausklick ausgeführt wird. Dadurch wird die Anzeige unterhalb der Checkboxen permanent aktualisiert. (Und das natürlich ohne, dass die Seite neu geladen werden muss).

Bilder



 
Eines der wichtigsten Elemente innerhalb von jQuery ist das Dollarzeichen, das Ihnen in den vorherigen Beispielen bereits mehrfach begegnet ist. Denn dieses Zeichen wird als Selektor für DOM-Elemente eingesetzt. Im Falle eines Elements sieht das also folgendermaßen aus:
$("element")

Innerhalb der Klammen wird in diesem Fall der Elementname erwartet. Das könnte beispielsweise das HTML-Element div sein.
$("div")

Ebenso sind innerhalb der Klammern aber auch komplexe Varianten wie diese hier
$("input:checked")
möglich. Dadurch werden aktivierte Checkboxen angesprochen. Mit reinem JavaScript würde sich das deutlich aufwendiger darstellen.

document.getElementById('mo').checked==true;

Denn hier müsste man wieder mit entsprechenden Schleifen arbeiten. Dank jQuery entfällt das. Die folgenden Beispiele zeigen Selektoren, die man erfahrungsgemäß immer mal wieder braucht:

Element Selektor
Alle h1-Elemente $('h1')
Alle div-Elemente $('div')
Alle div-Elemente mit der Klasse blau $('div.blau')
Alle aktivierten Checkboxen $("input:checked")
Alle Textfelder $("input:text")
Alle Passwortfelder $("input:password")
Das erste Element einer ungeordneten Liste $('ul li:first')


Diese Beispiele zeigen, dass tatsächlich für fast jeden Zweck entsprechende Selektoren zur Verfügung stehen. Wer sich mit den jQuery-Selektoren beschäftigt, wird nicht daran vorbeikommen, sich das DOM etwas genauer anzusehen. Dieses Document Object Model ist eine Spezifikation, über die der Zugriff auf Elemente aus HTML- und XML-Dokumenten geregelt wird. Dabei wird jedes Dokument als Knotenbaum betrachtet, der aus allen Elementen eines Dokuments besteht.

Bilder



Wichtig ist in diesem Zusammenhang, dass man versteht, wie sich die einzelnen Elemente solcher DOM-Bäume zueinander verhalten bzw. in welcher Beziehung sie zueinander stehen.
  • Eltern
  • Kinder
  • Nachbarn
Dank dieser Beziehungen kann man sich nun mittels JavaScript durch die Baumstruktur hangeln. (Oder besser gesagt: JavaScript kann sich durch die Baumstruktur bewegen). Das folgende Beispiel zeigt das Elternelement p. Dieses Elternelement besitzt drei Kindelemente.

<p>Ich bin das <em>Elternelement</em> und habe drei Kinder.</p>


Und hier die Auflösung:
  • Das erste Kindelement ist der Textknoten Ich bin das.
  • Das zweite Kindelement ist das em-Element.
  • Das dritte Kindelement ist der Textknoten und habe drei Kinder.

 
Wenn ihr euch XML-Dokumente in einem entsprechenden Browser direkt anseht, wird das DOM-Konzept ebenfalls deutlich.

Bilder


 
 
Hier werden die Knoten des Dokuments besonders gut sichtbar. Am einfachsten kann man sich das DOM-Konzept über sogenannte DOM-Inspektoren veranschaulichen. Diese gibt es mittlerweile unter anderem für den Firefox und den Internet Explorer. Wer den Internet Explorer verwendet, muss sich dafür die ID Developer Toolbar herunterladen. Diese gibt es kostenlos auf den offiziellen Microsoft-Seiten. Nach der Installation ist die Toolbar über das Extras-Menü des IE verfügbar.

Bilder



Hier könnt ihr euch dann durch die einzelnen Elemente der Seite mittels der Plus- und Minuszeichen klicken. Etwas Ähnliches gibt es auch für den Firefox. Dort nennt sich das Add-in Firebug. Dieses kostenlose Tool findet ihr unter https://addons.mozilla.org/de/firefox/addon/1843. Auch damit kann man sich explizit die Elemente des DOM des vorliegenden Dokuments anzeigen lassen.


Fazit
Dieses Tutorial hat einen ersten Eindruck von der Leistungsfähigkeit der jQuery-Selektoren vermittelt. Fast problemlos lassen sich dank derer alle beliebigen Elemente eines Dokuments ansprechen. Und dazu braucht man keine Schleifen, wie sonst in JavaScript üblich. Wenn ihr euch näher mit dem Document Object Model befassen wollt, sollte auf alle Fälle die offizielle Spezifikation auf den Seiten des W3C eure erste Anlaufstelle sein.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von phamo
  • 29.11.2009 - 02:15

Genau das was ich gesucht hab =]

danke

Portrait von terminixx
  • 25.11.2009 - 02:18

Vielen Dank Super Einführung, kann jetzt auch mal einiges selber ausprobieren

Portrait von Shuggahnaut
  • 24.11.2009 - 12:47

Gute Einführung. Danke!

Portrait von Parrot2602
  • 23.11.2009 - 08:52

Vielen Dank für die tolle Einführung in die Selektoren.
jQuery ist ja in diesem Bereich wirklich simpel!

Gruß
Parrot

x
×
×