Ersetzen Sie die Jquery -Dokumentfunktion mit JavaScript-js-Tutorial-php.cn

Ersetzen Sie die Jquery -Dokumentfunktion mit JavaScript

Lisa Kudrow

Freigeben： 2025-02-17 09:56:10

Original

439 Leute haben es durchsucht

Replace the jQuery Document Ready Function with JavaScript

Die

jQuery $(document).ready() Methode wird verwendet, um Code nach voll geladenem DOM auszuführen. Da sie die angegebene Funktion ausführt, wenn alle DOM -Elemente verfügbar sind, stellt sie sicher, dass versucht wird, die Elemente ordnungsgemäß zuzugreifen oder zu arbeiten.

Vor JQuery 3.0 ist die typische Verwendung der Verwendung anonymer Funktionen wie folgt:

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

Nach dem Login kopieren

Schlüsselpunkte

jQuery -Methode stellt sicher, dass der Code nur dann ausgeführt wird, wenn alle DOM -Elemente sicher und umsetzbar sind, in JQuery 3.0 jedoch erheblich verändert wurden und alle Syntaxmethoden (mit Ausnahme von document.ready) veraltet sind. $(handler);
Ereignisse sind reine JavaScript -Alternativen zu DOMContentLoaded Methoden, die in modernen Browsern und IE9 verwendet werden können. Für ältere Versionen von IE kann das jQuery ready -Ereignis verwendet werden. onreadystatechange
ein, um sicherzustellen, dass das DOM geladen wird. </body>

Änderungen zu

in jQuery 3.0 `ready()`

Vor der Veröffentlichung von Version 3.0 können Sie die Methode

auf verschiedene Weise aufrufen: ready

$(document).ready(handler);
$().ready(handler);
$(handler);

Alle oben genannten Varianten sind funktional äquivalent. Unabhängig davon, welches Element aufgerufen wird, wird der angegebene Handler so lange aufgerufen, wie das DOM voll geladen ist. Mit anderen Worten, es unterscheidet es in einem Bildelement

nicht davon, es in einem Dokumentelement aufzurufen, und die Auslöserzeit der Rückruffunktion hat nichts mit dem Laden des angegebenen Elements zu tun. Stattdessen wird es aufgerufen, nachdem das gesamte DOM voll geladen ist. $("img")

In JQuery 3.0 sind alle anderen Syntaxmethoden außer

veraltet. Der offizielle Grund ist: $(handler);

Dies liegt daran, dass die Wahl nichts mit dem Verhalten der
-Methode zu tun hat, was ineffizient ist und zu falschen Annahmen über das Verhalten der Methode führen kann. .ready()

Unterschied zwischen einem Ereignis und einem `ready` `load`

Ereignisse werden abgefeuert, wenn das DOM vollständig geladen ist und die Elemente sicher zugänglich sind. Andererseits feuert das Ereignis nach dem DOM und allen Ressourcen.

ready load Ereignisse können wie folgt verwendet werden:

load Dies wartet nicht nur darauf, dass das DOM für die Interaktion bereit ist, sondern auch darauf, dass das Bild vollständig geladen wird (dies kann je nach Bildgröße einige Zeit dauern).

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

Nach dem Login kopieren

Für normale DOM -Operationen benötigen Sie möglicherweise nicht das Ereignis

. Wenn Sie jedoch einen Lastspinner anzeigen möchten, bevor alle Ressourcen geladen werden, oder wenn Sie einige Berechnungen mit Bildgröße durchführen möchten, ist dies möglicherweise das Recht Auswahl .

Sie benötigen möglicherweise nicht jQuery.ready ()

Die Methode

ready stellt sicher, dass der Code nur ausgeführt wird, wenn alle DOM -Elemente sicher und umsetzbar sind. Aber was bedeutet das? Wenn Sie den JavaScript -Code im Teil des HTML -Dokuments <body> ausführen, wird sichergestellt, dass der Code ausgeführt wird, nachdem der Browser auch alle nachfolgenden Elemente geladen wird (z. B. <code><p> Elemente):

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

Nach dem Login kopieren

Wenn Sie JavaScript -Code als letztes in <body> ausführen, müssen Sie ihn wahrscheinlich nicht in ready() einwickeln

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

Nach dem Login kopieren

reines JavaScript

Alternativen `ready()`

Für moderne Browser und IE9 können Sie

Ereignisse anhören: DOMContentLoaded

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <🎜>
</head>
<body>
  <🎜>
  <p>我是这个网站的内容</p>
</body>
</html>

Nach dem Login kopieren

Beachten Sie jedoch, dass die Rückruffunktion nicht ausgeführt wird, wenn das Ereignis abgefeuert wurde. Um sicherzustellen, dass die Rückruffunktion immer ausgeführt wird, überprüft JQuery die

(Referenz) des Dokuments und führt die Rückruffunktion sofort aus, wenn es abgeschlossen ist: readyState

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
</head>
<body>
  <p>我是这个网站的内容</p>
  <🎜>
  <🎜>
</body>
</html>

Nach dem Login kopieren

Sie können auch die Domready -Bibliothek einschließen, die diese Lösung bereits implementiert.

alte Version von Internet Explorer

Für IE -Versionen, die weniger als oder gleich 8 sind, können Sie das Ereignis

verwenden, um die onreadystatechange: readyState des Dokuments zu erkennen

document.addEventListener("DOMContentLoaded", function(){
  // DOM 完全加载时的处理程序
});

Nach dem Login kopieren

Oder Sie können das

-Event wie JQuery verwenden, da dies in jedem Browser funktioniert. Dies führt auch zu Zeitverzögerungen, da alle Ressourcen geladen werden. Beachten Sie, dass Sie auch load wie oben erläutert überprüfen müssen, um sicherzustellen, dass die Rückruffunktion auch dann ausgeführt wird, auch wenn das Ereignis abgefeuert wurde. readyState

Schlussfolgerung

Wenn Sie nach einer reinen JavaScript -Alternative zur

-Methode suchen, können Sie das Ereignis ready verwenden. Wenn Ihre Systemanforderungen IE enthalten, müssen Sie möglicherweise DOMContentLoaded Ereignisse oder onreadystatechange Ereignisse verwenden. load

Wenn Sie JQuery in Ihrem Projekt verwenden, können Sie die

-Funktion von JQuery sicher weiterhin verwenden. Denken Sie jedoch daran, (veraltete) document.ready -Methoden für Elemente zu vermeiden, wie bereits erwähnt (z. B. ready()). $(document).ready()

Vergessen Sie nicht, dass Sie in vielen Fällen möglicherweise keine dieser Lösungen benötigen. Verschieben Sie Ihren JavaScript -Code einfach auf das End -Tag

und Sie können sicherstellen, dass das DOM geladen wird!

Das obige ist der detaillierte Inhalt vonErsetzen Sie die Jquery -Dokumentfunktion mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!