Comment remplacer JS par la méthode Read() de jQuery
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
});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);
}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中文网其它相关文章！
推荐阅读：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide
Feb 27, 2024 pm 06:45 PM
Explication détaillée de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Comment supprimer l'attribut height d'un élément avec jQuery ?
Feb 28, 2024 am 08:39 AM
Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
Comment savoir si un élément jQuery possède un attribut spécifique ?
Feb 29, 2024 am 09:03 AM
Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique
Comprendre le rôle et les scénarios d'application de eq dans jQuery
Feb 28, 2024 pm 01:15 PM
jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s
Introduction à la façon d'ajouter de nouvelles lignes à une table à l'aide de jQuery
Feb 29, 2024 am 08:12 AM
jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement Web. Lors du développement Web, il est souvent nécessaire d'ajouter dynamiquement de nouvelles lignes aux tableaux via JavaScript. Cet article explique comment utiliser jQuery pour ajouter de nouvelles lignes à une table et fournit des exemples de code spécifiques. Tout d'abord, nous devons introduire la bibliothèque jQuery dans la page HTML. La bibliothèque jQuery peut être introduite dans la balise via le code suivant :
