Heim >Web-Frontend >js-Tutorial >So ersetzen Sie JS durch die Read()-Methode von jQuery

So ersetzen Sie JS durch die Read()-Methode von jQuery

php中世界最好的语言Original: 2018-04-23 17:10:061224Durchsuche

Dieses Mal zeige ich Ihnen, wie die Read()-Methode von jQuery JS ersetzen kann, und wie die Read()-Methode von jQuery JS ersetzen kann. Was sind die Vorsichtsmaßnahmen?

Wie wir alle wissen, führt die ready-Methode in jQuery den Code im DOM sofort aus, nachdem er vollständig heruntergeladen wurde. Da es darauf wartet, dass alle DOM-Elemente geladen werden, bevor die angegebene Funktion ausgeführt wird, können Sie sicher sein, dass Methoden ausgeführt werden, die versuchen, Elementknoten zu bedienen und auf sie zuzugreifen. In diesem Artikel erfahren Sie, wie Sie die Read()-Methode von jQuery anstelle von nativem JS verwenden.

Vor jQuery 3.0 bestand die klassische Verwendung von „ready“ darin, eine anonyme Funktion zu verwenden, etwa so:

$(document).ready(function() {
 // Handler for .ready() called.
});

jQuery 3.0 ready( ) Änderungen

Vor der Veröffentlichung von jQuery 3.0 gab es die folgenden Methoden, die als Bereitschaftsmethoden bezeichnet wurden:

Betrieb auf dem Dokumentelement: $(document).ready(handler);

Auf leere Elemente operieren: $().ready(handler);

Oder direkt operieren (d. h. nicht auf ein bestimmtes Element): $(handler);

Alle oben genannten Varianten sind funktional äquivalent zu. Unabhängig davon, um welches Element es sich handelt, wird der angegebene Handler aufgerufen, nachdem das DOM geladen wurde. Mit anderen Worten: Der Abschluss des DOM-Ladevorgangs bedeutet hier nicht, dass ein bestimmtes Element im Dokument, beispielsweise das img-Element, geladen wurde. Im Gegenteil bedeutet es hier, dass der gesamte DOM-Baum geladen wurde.

In jQuery 3.0 sind alle verfügbaren Methoden außer $(handler) veraltet.

Offizielle Aussage:

Dies liegt daran, dass der Selektor nicht mit ready() verbunden ist, was nicht nur ineffizient ist, sondern auch dazu führt, dass die Browser-Engine die Methode interpretiert. Verhalten geht von falschen Annahmen aus.

Der Unterschied zwischen Ready-Event und Load-Event

Das Ready-Event wird ausgelöst, wenn das DOM geladen wird und auf das Element sicher zugegriffen werden kann. Andererseits wird das Ladeereignis ausgelöst, nachdem das DOM und alle Ressourcen geladen wurden.

Sie können das Ladeereignis wie folgt verwenden:

$(window).on("load", function(){
 // Handler when all assets (including images) are loaded
});

In diesem Fall müssen Sie nicht nur warten, bis auf die DOM-Struktur vollständig zugegriffen werden kann, sondern auch warten bis alle Bildressourcen vollständig geladen sind (Ladezeit hängt von der Bilddateigröße ab), um die Funktion auszuführen.

Für normale DOM-Vorgänge benötigen Sie das Ladeereignis möglicherweise nicht. Wenn Sie jedoch beispielsweise einen rotierenden Laderstil anzeigen möchten, bevor alle Ressourcen geladen sind, oder JS zum Berechnen der Bildgröße verwenden möchten, ist dies der Fall könnte eine gute Wahl sein.

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

Die ready-Methode stellt sicher, dass Code nur ausgeführt wird, wenn alle DOM-Elemente sicher manipuliert werden können . Aber was bedeutet das? Das bedeutet, dass, wenn der js-Code, den Sie ausführen möchten, in ein bestimmtes Fragment in HTML eingebettet ist, der Browser auch die folgenden Elemente laden muss, bevor er ausgeführt werden kann.

Genau wie im folgenden Beispiel:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  $(function(){ // .ready() callback, is only executed when the DOM is fully loaded
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  // This is the evidence that this method is only called when the
  // DOM is fully loaded
  console.log(length);
  });
 </script>
 </head>
 <body>
 <p>I'm the content of this website</p>
 </body>
</html>

Wenn der Javascript-Code, den Sie ausführen möchten, am Ende des Körpers platziert wird, müssen Sie ihn möglicherweise nicht verwenden die ready()-Methode, da das DOM-Element, das Sie möglicherweise manipulieren und auf das Sie zugreifen möchten, bereits geladen ist, wenn der Browser das Javascript analysiert:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 </head>
 <body>
 <p>I'm the content of this website</p>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  console.log(length);
 </script>
 </body>
</html>

Native JavaScript bereit( ) Ersatz

Für moderne Browser und IE9+ können Sie die gleiche Funktionalität erreichen, indem Sie das DOMContentLoaded-Ereignis abhören: ready()

document.addEventListener("DOMContentLoaded", function(){
 // Handler when the DOM is fully loaded
});

Bitte beachten Sie jedoch, dass, wenn das Ereignis bereits ausgegeben wurde, wird der Rückruf nicht als „implement“ bezeichnet. Um sicherzustellen, dass der Rückruf immer ausgeführt wird, überprüft jQuery das Attribut „readyState“ der Dokumentreferenz und führt, wenn sich der Attributwert in „Abgeschlossen“ ändert, sofort die Rückruffunktion

aus:

Enthält die domReady-Bibliothek. Diese Lösung wurde implementiert.

var callback = function(){
 // Handler when the DOM is fully loaded
};
if (
 document.readyState === "complete" ||
 (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

Alte Version des IE-BrowsersFür IE8- und niedrigere Browser können Sie das onreadystatechange-Ereignis verwenden, um die zu überwachen readyState-Attribut des Dokuments:

document.attachEvent("onreadystatechange", function(){
 // check if the DOM is fully loaded
 if(document.readyState === "complete"){
 // remove the listener, to make sure it isn't fired in future
 document.detachEvent("onreadystatechange", arguments.callee);
 // The actual handler...
 }
});

或者你可以使用Load事件，如jQuery，这样可以在任何浏览器上运行。这也会导致一个时间延迟，因为它会等待所有的资产被加载。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen