Wenn der globalen jQuery-Funktion eine Zeichenkette übergeben wird, wird diese wie zuvor beschrieben als CSS-Selektor interpretiert. Es ist jedoch auch möglich, der globalen Funktion ein Objekt zu übergeben. Das kann auch ein von JavaScript vorgegebenes Objekt sein – wie im Fall des document-Objekts. Mit $(document) sprechen Sie das HTML-Dokument als Objekt an. Ein wichtige Methode, die jQuery für das document-Objekt bereit stellt, ist ready(). Es handelt sich um einen Ereignis-Handler. Damit können Sie erreichen, dass Ihr Code, der ja meistens in irgendeiner Form Inhalte, Verhaltensweisen oder Eigenschaften von HTML-Elementen ändert, erst dann ausgeführt wird, wenn das DOM vollständig geladen ist.

Dadurch vermeiden Sie Laufzeitfehler.

Beispiel 1

<script>
function Aufrufzeitpunkt_setzen() {
   var Aufrufzeitpunkt = $.now();
   ("#Aufrufzeitpunkt").attr("value", Aufrufzeitpunkt);
}
$(document).ready(Aufrufzeitpunkt_setzen);
</script>
<form>
<input type="hidden" name="Aufrufzeitpunkt" id="Aufrufzeitpunkt" value="">
</form>

Erläuterung

Das Beispiel ist zwar korrektes, wenn auch noch kein ganz typisches jQuery. Es dient jedoch zum besseren Verständnis. Im Scriptbereich des Beispiels wird eine Funktion namens Aufrufzeitpunkt_setzen() notiert. Darin wird eine Variable namens Aufrufzeitpunkt erstellt. Als Wert bekommt sie den aktuellen Unix-Zeitstempel zugewiesen, ermittelt über die jQuery-Methode now(). Als nächstes wird dieser ermittelte Wert in das value-Attribut des versteckten Formularelements eingefügt, das unterhalb des Scriptbereichs notiert ist. Die dabei verwendete Syntax wird später noch genauer beschrieben. Hier geht es nur darum zu verstehen, was die Funktion Aufrufzeitpunkt_setzen() tut.

Würde die Funktion in dem Scriptbereich am Ende einfach mit Aufrufzeitpunkt_setzen() aufgerufen, würde JavaScript einen Fehler erzeugen. Denn die Funktion versucht ein Element anzusprechen, das zum Ausführungszeitpunkt noch gar nicht in die DOM-Abbildung des HTML-Dokuments eingelesen ist, weil es erst weiter unten notiert ist. Doch die Funktion wird ja nicht direkt aufgerufen, sondern sie wird von $(document).ready() abhängig gemacht. Dadurch wird sie erst ausgeführt, wenn das DOM des Dokuments komplett eingelesen ist.

Die jQuery-eigene ready()-Methode des document-Objekts erwartet einen Parameter, und zwar eine Funktion. Im obigen Beispiel wird der Name einer existierenden Funktion übergeben – nur der Name, keine Parameterklammern.

Beispiel 2

<script>
$(document).ready( function() {
   var Aufrufzeitpunkt = $.now();
   ("#Aufrufzeitpunkt").attr("value", Aufrufzeitpunkt);
} );
</script>
<form>
<input type="hidden" name="Aufrufzeitpunkt" id="Aufrufzeitpunkt" value="">
</form>

Erläuterung

Dieses Beispiel ist typischer für jQuery. Wenn eine Funktion wie in Beispiel 1 nur an einer Stelle im Code aufgerufen wird, ist sie eigentlich ein klassisches Unterprogramm. In der objektorientierten Programmierung, wie sie jQuery verfolgt, wird eine solche Funktion denn auch tatsächlich als Routine behandelt, die zu einem bestimmten Zeitpunkt abgearbeitet wird – im Beispiel dann, wenn der Zustand $(document).ready() erreicht ist. Die ready()-Methode erwartet wie zuvor schon erläutert eine Funktion. In Beispiel 2 wird jedoch nicht der Name einer anderswo notierten Funktion übergeben. Stattdessen wird an der Stelle, wo der Parameter für ready() erwartet wird, eine komplette anonyme Funktion (also eine Funktion ohne Namen) notiert. Der Funktionskörper hat die Syntax function(...) { ... }. In den runden Klammern können der Funktion Parameter übergeben werden, und in den geschweiften Klammern wird der Inhalt der Funktion notiert.

So ergibt sich das Gesamtkonstrukt $(document).ready( function() { … } );

Wenn Sie dieses Syntax-Konstrukt nachvollziehen können, haben Sie auch das Grundprinzip von jQuery verstanden.