jQuery, Version 12

Alte Version

Dies ist eine alte Version des Inhalts in unserem Archiv. Besuchen Sie die aktuelle Version dieser Seite.

Diese Version wurde von Philipe Fatio am 12. April 2008 um 19:26 Uhr erstellt.
Bemerkung des Bearbeiters: so ziemlich alles

Änderungen gegenüber vorheriger Version anzeigen

Selektoren

Anhand der $ (Dollar) Funktion kann man auf einfache Weise auf Elemente zugreifen. Die Funktion liefert die zum Ausdruck gefundene Elemente zurück. Das erste Argument ist ein String mit einem CSS-Selektor (wobei einige Selektoren die jQuery unterstützt nicht standardisiert sind) wie z.B. p.warning > strong. Als optionales zweites Argument kann man den Kontext angeben, in dem gesucht werden soll. Die Funktion gibt immer ein Array zurück, auch wenn nur ein Element gefunden wird.

Beispiele

Einfache Selektoren
Ausdruck Rückgabe
$("li") Alle <li>-Elemente
$("#content") Das Element mit der ID content
$(".warning") Alle Elemente mit der Klasse warning
$("*") Alle Elemente
$("strong, span, p.legend"); Alle <strong>- und alle <span>-Elemente sowie auch alle <p>-Elemente mit der Klasse legend
Hierarchische Selektoren
Ausdruck Rückgabe
$("form input") Alle <input>-Elemente, die sich in einem <form>-Element befinden (nicht zwingend direktes Kind-Element vom <form>-Element)
$("#content > *") Alle Elemente, die als Eltern-Element das Element mit der ID content haben
$("label + input") Alle <input>-Elemente, die unmittelbar nach einem <label>-Element folgen
Pseudo-Selektoren
Ausdruck Rückgabe
$("a:first") Das erste <a>-Element im Dokument
$("a:last") Das letzte <a>-Element im Dokument
$("tr:odd") Alle ungeraden Tabellenzeilen, also die 1., 3., 5. usw.
$("tr:even") Alle geraden Tabellenzeilen, also die 2., 4., 6. usw.
$("tr > td:eq(2)") Genau die 3. Zelle aller Tabellenzeilen (Zählung beginnt bei 0)
$("tr > td:gt(3)") Alle Zellen einer Tabellenzeile die sich nach der 4 Zelle befinden
$("tr > td:lt(3)") Alle Zellen vor der 4. Zelle also die ersten 3 Zellen einer Tabellenzeile

Ausführen von Code bei geladenem Dokument

Im Normalfall muss man, wenn JavaScript zum Einsatz kommt, warten bis das Dokument geladen ist, damit man Zugang zu allen Elementen hat. Man kann dies wie folgt machen:

 
JavaScript
1
2
3
window.onload = function() {
    alert("Dokument geladen. Auf alle Elemente kann nun zugegriffen werden.");
}

Der Nachteil dabei ist, dass window.onload erst aufgerufen wird, wenn auch alle Bilder im Dokument vollständig geladen ist, was in einigen Fällen länger dauern kann. Dabei könnte bereits auf alle Elemente zugegriffen werden. jQuery hat eine Methode, mit der man bereits beim Laden des Dokumentes Code ausführen kann.

 
JavaScript
1
2
3
$(document).ready(function(){
    alert("Dokument geladen. Auf alle Elemente kann nun zugegriffen werden.");
});

Es wird ein alert ausgegeben, sobald alle Knoten oder Nodes auf der Seite ansprechbar sind, jedoch kann es sein, dass allfällige Bilder noch nicht vollständig geladen sind.

Weiteres (bitte bearbeiten)

jQuery Object Accessors:

$("li").each(function() { $(this).html('bla'); | Jedem Element li wird der text "bla" eingesetzt.

$(".myclass").size(); |Gib die Anzahl der Elemente der Kalsse myclass zurück.

$("#myid").length; |Gib die Anzahl der Elemente mit der ID myid zurück.

.size(); & .length; | Sind gleich.

$(".myclass").eq(0).text('halloichbindererste'); | Myclass wird ausgewählt. Wenn nun mehrere div container mit der Klasse existieren, wird exakt dem ersten der html text "halloichbindererste" eingefügt.

$("div").click(function () { | Hier wird der index des div elements ausgegeben, worauf geklickt wurde.
var meinindex = $("div").index(this); | this gibt des selbe element aus.
$(this).text("That was div index #" + meinindex); });