Ich habe kürzlich JQuery studiert und diese Sache ist immer noch sehr umfassend und tiefgreifend. Lassen Sie mich meine Lernzusammenfassung teilen
$(document).Ready()-Methode VS OnLoad-Ereignis VS $(window).load()-Methode
Das Onload-Ereignis von Body hat im Vergleich zur Ready-Methode von JQuery viele Nachteile. Zum Beispiel:
1. Problem beim Laden mehrerer Funktionen
<body onload="a();b();"> </body>
2. Code und Inhalt sind nicht getrennt
Es versteht sich von selbst, dass das so ekelhaft ist -.-!!
Beim Body.Onload-Ereignis wird es erst ausgelöst, wenn der gesamte Seiteninhalt geladen ist, einschließlich Bilder, Flash usw. Wenn die Seite viel Inhalt hat, wird der Benutzer lange warten 🎜>
Was die Methode $(document).ready() betrifft, wird diese erst ausgelöst, nachdem das gesamte DOM der Seite geladen ist, was die Webseite zweifellos erheblich beschleunigen wird
Aber für einige spezielle Anwendungen, wie das Vergrößern und Verkleinern von Bildern und das Zuschneiden von Bildern. Muss es ausgeführt werden, nachdem der gesamte Inhalt der Webseite geladen wurde? Ich empfehle die Verwendung der Methode $(window).load(). Diese Methode wird erst ausgelöst, wenn der gesamte Inhalt der Seite geladen ist, und sie weist nicht die Nachteile des OnLoad-Ereignisses auf.
<script type="text/javascript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>
Vergessen Sie natürlich nicht die entsprechende Unload-Methode
$(window).unload(function() {
alert("good bye");
});
JS-Code auslösen, bevor das gesamte DOM geladen wird
Diese Methode ist meine Lieblingsmethode beim Debuggen und manchmal verwende ich diese Methode auch während der Entwicklung
<body>
<script type="text/javascript">
(function() {
alert("hi");
})(jQuery)
</script>
</body>
<body>
<div id="test">this is the content</div>
<script type="text/javascript">
alert($("#test").html());//I Can display the content
</script>
</body>
<body>
<script type="text/javascript">
alert($("#test").html());//I Can't display the content
</script>
<div id="test">this is the content</div>
</body>
