jQuery: DOM-Elemente auswählen

Standard

Im letzten Beitrag „Ein erster Blick auf jQuery“ haben wir uns die Grundlagen von jQuery angesehen. Diesmal sehen wir uns an, wie wir mit jQuery DOM-Elemente selektieren können.

Selektoren

Eine JavaScript-Applikation ändert die GUI, indem sie den Dokumentenbaum manipuliert. Das DOM bietet dafür die Methoden getElementById, getElementsByName oder getElementsByTagName. Mit jQuery geht’s einfacher.

Zwei weitere Sprachen müssen häufig im Dokumentenbaum navigieren: CSS und XPath. CSS- und XPath-Kenntnisse setze ich voraus.

Sehen wir uns einmal ein Beispiel an. Angenommen irgendwo in einem Dokument befindet sich folgendes Code-Schnipsel:

    <div id="MenuItem">Datei</div>

Das DIV-Element findet man mit dem DOM-API mit folgendem Code:

    var element = document.getElementById('MenuItem');

Die Voraussetzung dafür ist, dass das gesuchte Element ein ID-Attribut besitzt. Mit CSS setzt man die Vordergrundfarbe des Elements so:

    #MenuItem { color: #fe4578; }

Dabei ist „#MenuItem“ der CSS-Selektor. Mit jQuery kann man CSS-Selektoren für die Navigation im Dokumentenbaum verwenden:

    $("#MenuItem").click(function() {
        ...
    });

Dem $-Zeichen sind wir schon in der letzten Folge begegnet. Es handelt sich dabei um einen Alias für die Funktion jQuery. jQuery akzeptiert entweder ein DOM-Element oder einen Selektor als Argument.

Mehrere Elemente gleichzeitig manipulieren

Bisher haben wir immer nur ein DOM-Element bearbeitet. Doch was macht folgendes Code-Schnipsel?

    $(".clickable").click(function() {
    ...
    });

Der Selektor „.clickable“ wählt alle Elemente mit der CSS-Klasse „clickable“ und registriert darauf einen Click-Eventhandler. Mit jQuery können Sie also mehrere Elemente gleichzeitig bearbeiten.

Methoden-Verkettung

Der Rückgabewert jeder jQuery-Methode ist das jQuery-Objekt selbst. Daher können Methoden-Aufrufe verkettet werden.

    $("p").css("color", "#800000").addClass("paragraph").click(function() {
        ...
    });

In diesem Beispiel setzen wir die Vordergrundfarbe aller P-Elemente auf rot, fügen allen P-Elementen die CSS-Klasse „paragraph“ hinzu und registrieren auf allen P-Elementen einen Click-Eventhandler.

In diesem Beispiel sind wir zwei neuen Methoden begegnet: css und addClass. css setzt eine oder mehrere CSS-Eigenschaften. Mehrere CSS-Eigenschaften können so angegeben werden:

    $("p").css({
        "color": "#800000",
        "background-color": "#000000",
        "text-weight": "bold"
    });

addClass fügt eine CSS-Klasse hinzu.

Auswahl erweitern und einschränken

jQuery hat einige Methoden, die die Auswahl der DOM-Elemente erweitern oder einschränken. In Verbindung mit der Methodenverkettung ergeben sich daraus interessante Möglichkeiten.

Wenn Sie das folgende Beispiel starten, können Sie die Text aus- und einblenden, indem Sie auf die entsprechende Links klicken.

Beispiel starten

Hier ist der Source-Code des Beispiels:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>jQuery Sample</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="sample.js" type="text/javascript"></script>
      </head>
      <body>
        <div>
          <a href="#" class="activateLink">Text 1</a>
          <div>
            Erster Text
          </div>
        </div>
        <div>
          <a href="#" class="activateLink">Text 2</a>
          <div>
            Zweiter Text
          </div>
        </div>
      </body>
    </html>

Der JavaScript-Code für dieses Beispiel ist nur fünf Zeilen lang:

    $(document).ready(function() {
      $("a.activateLink").click(function() {
        $(this).next("div").toggle();
      });
    });

Der Click-Eventhandler sucht ein DIV-Element, das dem geklickten Link unmittelbar folgt, und ändert dessen Sichtbarkeit.

Die Methode filter

Beispiel starten

Hier ist der HTML-Sourcecode:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>jQuery 02 - Filter Methods</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery_02_filter_methods.js" type="text/javascript"></script>
      </head>
      <body>
        <ul>
          <li><a href="http://www.andreas-schlapsi.com" class="external_link">Link 1</a></li>
          <li><a href="http://www.jquery.com" class="external_link">Link 2</a></li>
          <li><a href="http://ui.jquery.com" class="external_link">Link 3</a></li>
        </ul>
        <ul>
          <li><a href="#" class="message_link">Erste Nachricht</a></li>
          <li><a href="#" class="message_link">Zweite Nachricht</a></li>
        </ul>
        <div id="MessageLabel" style="border: 1px solid #000; background-color: #eee; padding: 1em;">
        </div>
        <ul>
          <li><a href="http://www.google.com">Ein normaler Link</a></li>
        </ul>
      </body>
    </html>

Und hier der JavaScript-Code:

    $(document).ready(function() {
      $("a")
        .filter(".external_link")
          .click(function() {
            alert("Sie verlassen die Seite.");
          })
        .end()
        .filter(".message_link")
          .click(function() {
            $("#MessageLabel").text($(this).text());
            return false;
          })
        .end();
    });

Das Beispiel filtert aus den selektierten Linkelementen jene heraus, die die Klasse „.external_link“ haben und registriert darauf einen Click-Eventhandler, der eine Messagebox anzeigt. Die Methode end hebt die Filterung wieder auf. Auf allen Linkelementen mit der Klasse „.message_link“ wird ein anderer Click-Eventhandler registriert, der den Textinhalt des geklickten Links in das DIV-Element mit der ID „MessageLabel“ kopiert. Die Methode text ohne Parameter liest den Textinhalt aus, statt ihn zu setzen.

Beachten Sie, dass der zweite Click-Eventhandler false zurückgibt. Bei einem Click-Eventhandler wird dadurch die Ereignisbehandlung abgebrochen, d.h. dass der Browser dem Link, der im Attribut href angegeben ist, nicht folgt.

jQuery-Dokumentation

Folgende Links auf die jQuery-Dokumentation enthalten detailliertere Informationen zu den Themen dieses Artikels:

Zusammenfassung

Dieses Mal haben wir gesehen, wie wir mit Selektoren ein oder mehrere DOM-Elemente finden und bearbeiten können. Die jQuery-Methoden geben das jQuery-Objekt zurück und können daher verkettet werden. Einige Methoden schränken die Auswahl ein oder erweitern diese.

In der nächsten Folge dieser Serie geht es um DOM-Manipulation und Effekte.