dieses Event ein
alert()
-Fensteröffnet, wenn das DOM schon fertig, die Seite aber noch nicht komplett geladen ist:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
Das DOM ist fertig!
Diskussion
Die Eventhandler-Methode
ready()
ist der Ersatz von jQuery für das normale JavaScript-Event
window.onload
. Sie kann so oft genutzt werden wie Sie wollen. Es ist sinnvoll, es in Ihrer Webseite erst nach dem Einbinden von Stylesheet-Deklarationen und Includes zu verwenden. Dadurch stellen Sie sicher, dass alle Element-Eigenschaften korrekt definiert sind, bevor jQuery- oder JavaScript-Code durch das Event
ready()
ausgeführt wird.
Zusätzlich stellt die jQuery-Funktion selbst eine Kurzversion des Ready-Events bereit. Damit kann das
alert()
-Beispiel so umgeschrieben werden:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
Das DOM ist fertig!
Dieses jQuery-Event ist nur dann notwendig, wenn Sie JavaScript am Anfang des Dokuments im Element
einbinden müssen. Ich vermeide
ready()
dadurch, dass ich alle JavaScript-Includes und den Inline-Code vor dem schließenden
-Element einfüge. Dafür habe ich zwei Gründe.
Zum einen haben moderne Optimierungstechniken gezeigt, dass Seiten schneller geladen werden, wenn das JavaScript vom Browser erst am Ende geparst werden muss. Fügen Sie also den JavaScript-Code am Ende einer Webseite ein, dann lädt der Browser zuerst alles andere, bevor er sich dem JavaScript zuwendet. Das ist gut, weil die meisten Browser das Laden anderer Objekte unterbrechen, bis die JavaScript-Engine das in einer Webseite enthaltene JavaScript kompiliert hat. Am Anfang der Webseite führt das zu einer Verzögerung. Es mag Situationen geben, in denen es einfacher ist, das JavaScript im
-Element unterzubringen. Aber ehrlich gesagt habe ich es noch nie erlebt, dass dies absolut notwendig war. Alle Schwierigkeiten, die sich bei der Entwicklung dadurch ergaben, dass der JavaScript-Code erst am Ende der Seite stand, wurden durch die Performance-Gewinne mehr als ausgeglichen.
Und warum sollten wir zweitens mehr Code schreiben wollen, wenn wir das Ziel auch durch das Verschieben des Codes an das Ende der Seite erreichen können? Wenn ich die Wahl zwischen mehr und weniger Code habe, wähle ich natürlich weniger Code. Durch das Vermeiden des
ready()
-Events benötigt man weniger Code, der im Allgemeinen auch noch schneller ausgeführt werden kann.
So, nachdem wir das geklärt haben, sehen Sie hier ein Beispiel unseres
alert()
-Codes, der das Event
ready()
nicht verwendet:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Das DOM ist fertig!
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
Beachten Sie, dass ich meinen JavaScript-Code vor dem schließenden
-Element untergebracht habe. Jegliches zusätzliche Markup sollte im HTML-Dokument vor dem JavaScript-Code platziert werden.
Selektieren von DOM-Elementen mit Selektoren und der jQuery-Funktion
Problem
Sie müssen ein einzelnes DOM-Element und/oder eine Menge von DOM-Elementen selektieren, um auf dies(e) Element(e) jQuery-Methoden anzuwenden.
Lösung
jQuery stellt zwei Möglichkeiten bereit, Elemente aus dem DOM zu selektieren. Bei beiden nutzen Sie die jQuery-Funktion (
jQuery()
oder den Alias
$()
). Die