Maison >interface Web >js tutoriel >Comment remplacer JS par la méthode Read() de jQuery

Comment remplacer JS par la méthode Read() de jQuery

php中世界最好的语言original: 2018-04-23 17:10:061255parcourir

Cette fois, je vais vous montrer comment la méthode Read() de jQuery peut remplacer JS, et la méthode Read() de jQuery peut remplacer JS Quelles sont les précautions Voici un cas pratique, jetons un oeil. .

Comme nous le savons tous, la méthode ready de jQuery exécute le code dans le DOM immédiatement après son téléchargement complet. Parce qu'il attend que tous les éléments DOM soient chargés avant d'exécuter la fonction donnée, vous pouvez être sûr que les méthodes qui tentent de fonctionner et d'accéder aux nœuds des éléments seront exécutées. Cet article vous présentera comment utiliser la méthode Read() de jQuery au lieu du JS natif. Jetons un coup d'œil.

Avant jQuery 3.0, l'utilisation classique de ready consistait à utiliser une fonction anonyme, comme celle-ci :

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

jQuery 3.0 ready( ) Modifications

Avant la sortie de jQuery 3.0, il existait les méthodes suivantes appelées méthodes prêtes :

Opérant sur l'élément document : $(document).ready(handler);

Opérer sur des éléments vides : $().ready(handler);

Ou opérer directement (c'est-à-dire pas sur un élément spécifique) : $(handler);

Toutes les variantes nommées ci-dessus sont fonctionnellement équivalentes à. Quel que soit l'élément dont il s'agit, son gestionnaire spécifié sera appelé après le chargement du DOM. En d'autres termes, l'achèvement du chargement du DOM ici ne signifie pas qu'un élément spécifique du document, tel que l'élément img, a été chargé. Au contraire, cela signifie ici que l’intégralité de l’arborescence DOM a été chargée.

Dans jQuery 3.0, toutes les méthodes prêtes à l'exception de $(handler) sont obsolètes.

Déclaration officielle :

Cela est dû au fait que le sélecteur n'est pas connecté à ready(), ce qui est non seulement inefficace mais amène également le moteur du navigateur à interpréter la méthode. Le comportement fait des hypothèses incorrectes.

La différence entre l'événement ready et l'événement load

L'événement ready est déclenché lorsque le DOM est chargé et que l'élément est accessible en toute sécurité. D'un autre côté, l'événement de chargement est déclenché après le chargement du DOM et de toutes les ressources.

Vous pouvez utiliser l'événement de chargement comme suit :

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

Dans ce cas, non seulement vous devez attendre que la structure DOM soit entièrement accessible, mais vous devez également attendre jusqu'à ce que toutes les ressources image soient complètement chargées (le temps de chargement dépend de la taille du fichier image) pour exécuter la fonction.

Vous n'aurez peut-être pas besoin de l'événement de chargement pour les opérations DOM normales, mais si vous souhaitez afficher un style de chargeur rotatif avant que toutes les ressources ne soient chargées, par exemple, ou si vous souhaitez utiliser JS pour calculer la taille de l'image, ceci pourrait être un bon choix.

Vous n'aurez peut-être pas besoin de jQuery.ready()

La méthode ready garantit que le code n'est exécuté que lorsque tous les éléments du DOM peuvent être manipulés en toute sécurité . Mais qu’est-ce que cela signifie ? Cela signifie que lorsque le code js que vous souhaitez exécuter est intégré dans un certain fragment HTML, le navigateur doit également charger les éléments suivants avant de pouvoir être exécuté.

Tout comme l'exemple suivant :

<!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>

Si le code javascript que vous souhaitez exécuter est placé à la fin du corps, vous n'aurez peut-être pas besoin d'utiliser la méthode ready() , car l'élément DOM que vous essayez de manipuler et auquel vous essayez d'accéder a déjà été chargé au moment où le navigateur analyse le javascript :

<!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 ready( ) remplacement

Pour les navigateurs modernes et IE9+, vous pouvez obtenir la même fonctionnalité en écoutant l'événement DOMContentLoaded : ready()

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

Cependant, veuillez noter que si l'événement a déjà été émis, le rappel ne sera pas appeléimplément. Pour garantir que le rappel s'exécute toujours, jQuery vérifie l'attribut "readyState" de la référence du document) et si la valeur de l'attribut change pour terminer, la

fonction de rappel est exécutée immédiatement :

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);
}

inclut la bibliothèque domReady, Cette solution a été implémentée.

Ancienne version du navigateur IE

Pour les navigateurs IE8 et inférieurs, vous pouvez utiliser l'événement onreadystatechange pour surveiller le Attribut readyState du document :

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中文网其它相关文章！

Articles Liés

Voir plus