Javascript kann bestimmte Operationen an DOM-Elementen erst ausführen, nachdem diese definiert wurden. Dieses Problem wird im Artikel „Javascript-Ausführungssequenz“ //www.VeVB.COm/article/44577.htm ausführlich beschrieben.
jQuery verwendet document.ready, um sicherzustellen, dass der auszuführende Code ausgeführt wird, nachdem das DOM-Element geladen wurde. Im Artikel „jQuery-Grundlagen – Erste Schritte“ habe ich beispielsweise den folgenden jQuery-Code verwendet:
Kopieren Sie den Codecode wie folgt:
<!-- $(document).ready(function ()
{
Alert("Mein erster jQuery-Code!");
});
// -->
Die Bedeutung dieses Codes ist: Wenn der Dom-Baum geladen wird, wird eine Warnmeldung angezeigt.
document.ready() ähnelt der herkömmlichen Methode <body onload="load()">, außer dass die Methode onload() nach dem Laden der Seite ausgeführt wird, einschließlich des Ladens von DOM-Elementen und anderen Seitenelementen (z. B. Bildern).
Daher ist die Ausführungsgeschwindigkeit der Methode document.ready() schneller als die der Methode onload().
Zwei letzte zu beachtende Punkte (aus der jQuery-Dokumentation):
1. Stellen Sie sicher, dass im Onload-Ereignis des <body>-Elements keine registrierte Funktion vorhanden ist, da sonst das Ereignis $(document).ready() möglicherweise nicht ausgelöst wird. (
Ich habe versucht, dies anhand des folgenden Beispiels zu demonstrieren, aber ohne Erfolg, daher vermute ich, dass dies nur eine Möglichkeit ist. )
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<title>Mein zweites jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- // Das Folgende ist die Ladefunktion, die die JQuery-Registrierungsfunktion $ enthält
function load(){ $("p").append("<b>Hallo</b>" }
//Das Folgende ist der jQuery-Code
$(Dokument).ready(Funktion ()
{ $("p").append("Mein erster jQuery-Code!"
);
$("p").append("<b>Hallo</b>");
</mce:script>
</head>
<body onload="load()">
<h2>jQuery einfaches Beispiel 2</h2>
<p>Ich möchte sagen: </p>
</body>
</html>
2. Das Ereignis $(document).ready() kann unbegrenzt oft auf derselben Seite verwendet werden. Die registrierten Funktionen werden nacheinander (im Code) ausgeführt.