Wir haben ein gutes Stück über Selektoren gesprochen. Ein jQuery-Selektor wie $ ("h1") wählt alle aus
Wird das $("h1").css("color", "red");
Aber manchmal werden Skripte in den Kopf geladen. Es gibt alle möglichen Ausreden dafür, meistens schlecht, aber hey, lasst uns nicht ohne Details zu urteilen =).
Wir können das Problem der nicht gefundenen Elemente immer noch auf ziemlich zufriedenstellende Weise beheben, selbst wenn wir gezwungen sind, Skripte in den Kopf zu laden. Wir tun dies über die jQuery-Funktion „DOM Ready“. Im wahrsten Sinne des Wortes, wenn das Dokument fertig und bereit ist, bearbeitet zu werden. Es sieht aus wie das:
$(document).ready(function() ( ));Es gibt eine kürzere Version, die genau das Gleiche tut:
$(function() ( ));Wenn Sie Ihren Code in eine solche Funktion einfügen, wird sichergestellt, dass er erst ausgeführt wird, wenn das Dokument fertig ist. Es ist eigentlich ein ziemlich cleveres Stück Code, das es macht, was natürlich schwierig ist, Cross-Browser zu machen. Das Coole daran ist, dass es ziemlich schnell ist. Es ist nicht dasselbe wie darauf zu warten, dass das gesamte Fenster geladen wird, was langsam ist, da es darauf wartet, dass alle Ressourcen heruntergeladen werden, bevor es ausgelöst wird. DOM bereit passiert viel früher. Wenn Sie warten müssen, bis Ressourcen verfügbar sind (z. B. müssen Sie ein Bild messen), können Sie folgendermaßen darauf warten:
$(window).load(function() ( ));Wenn Sie unser früheres JavaScript-in-the-Head-Problem mit DOM Ready beheben, sieht der Code folgendermaßen aus:
Learning jQuery $(function() ( $("h1").css("color", "red"); ));