Quelle est la différence entre jquery $(document).ready() et onload

Différence : window.onload n'a pas de méthode d'écriture simplifiée. Il doit attendre que tous les éléments de la page, y compris les images, soient chargés avant de pouvoir être exécuté. Et "$(document).ready()" peut être abrégé en "$(function(){})", qui est exécuté après le dessin de la structure DOM, sans avoir à attendre qu'elle soit chargée.

Tutoriel recommandé : Tutoriel vidéo jquery

jquery $(document).ready( ) et window.onload

1 Temps d'exécution

window.onload doit attendre que tous les éléments de la page, y compris les images, soient chargés. . peut être exécuté.
$(document).ready() est exécuté après le dessin de la structure DOM, sans avoir à attendre son chargement.

2. Le nombre d'écritures est différent

Vous ne pouvez pas écrire plusieurs méthodes window.onload en même temps. S'il existe plusieurs méthodes window.onload, une seule. sera exécuté

$(document).ready() peut être écrit plusieurs fois en même temps, et tous peuvent être exécutés

Écriture simplifiée

window.onload n'a pas d'écriture simplifiée

$(document).ready(function(){}) peut être abrégé en $(function(){});

Explication :

Prenons l'exemple du navigateur qui charge un document. Une fois la page chargée, le navigateur ajoutera des événements aux éléments DOM via JavaScript. Dans le code JavaScript standard, la méthode window.onload est généralement utilisée, tandis que dans jQuery, la méthode $(document).ready() est utilisée.

La méthode $(document).ready() et la méthode window.onload ont des fonctions similaires, mais il existe des différences dans le timing d'exécution. La méthode window.onload est exécutée une fois que tous les éléments de la page Web (y compris les fichiers associés aux éléments) sont complètement chargés dans le navigateur, c'est-à-dire que JavaScript ne peut accéder qu'à n'importe quel élément de la page Web pour le moment. Le gestionnaire d'événements enregistré via la méthode $(document).ready() dans jQuery peut être appelé lorsque le DOM est complètement prêt. A ce stade, tous les éléments de la page web sont accessibles à jQuery, mais cela ne signifie pas que les fichiers associés à ces éléments ont été téléchargés.

Par exemple, il existe un grand site Web de galerie de photos qui ajoute certains comportements à toutes les images de la page Web, comme masquer ou afficher l'image après avoir cliqué dessus. Si la méthode window.onload est utilisée, l'utilisateur doit attendre que chaque image soit chargée avant de continuer. Si vous utilisez la méthode $(document).ready() dans jQuery pour le configurer, vous pouvez l'utiliser dès que le DOM est prêt, sans attendre que toutes les images soient téléchargées. Évidemment, analyser une page Web dans une arborescence DOM est beaucoup plus rapide que charger tous les fichiers associés dans la page Web.

Une autre chose à noter est que puisque l'événement enregistré dans la méthode $(document).ready() sera exécuté tant que le DOM est prêt, le fichier associé à l'élément ne pourra pas être téléchargé à ce moment-là. temps. Par exemple, le code HTML associé à l'image a été téléchargé et analysé dans une arborescence DOM, mais il est très probable que l'image n'ait pas encore été chargée, donc les attributs tels que la hauteur et la largeur de l'image peuvent ne pas être valides à ce stade. temps. Pour résoudre ce problème, vous pouvez utiliser une autre méthode de chargement de page dans JQuery : la méthode load(). La méthode load() lie une fonction de gestionnaire à l'événement onload de l'élément. Si la fonction de gestionnaire est liée à l'objet window, elle sera déclenchée après le chargement de tout le contenu (y compris les fenêtres, les cadres, les objets, les images, etc.). Si la fonction de gestionnaire est liée à un élément, elle sera déclenchée après le chargement de tout le contenu (y compris les fenêtres, les cadres, les objets, les images, etc.). le contenu de l'élément est chargé. Le code jQuery est le suivant :

$(window).load(function () {
    //编写代码
})

est équivalent au code suivant en JavaScript :

window.onload = function () {
    //编写代码
}

Supposons qu'il y ait deux fonctions dans la page Web, le code JavaScript est le suivant :

function one() {
    alert("one");
}
function two() {
    alert("two");
}

Lorsque la page web est chargée Enfin, la fonction et les deux fonctions sont appelées respectivement via le code Javascript :

window.onload = one;
window.onload = two;

Cependant, lorsque le code est exécuté, on constate que seule la chaîne " deux" la boîte de dialogue apparaît.

La raison pour laquelle la boîte de dialogue de chaîne « un » ne peut pas apparaître est que l'événement onload de JavaScript ne peut enregistrer qu'une référence à une fonction à la fois. Il écrasera automatiquement la fonction précédente par la fonction ultérieure, donc. il ne peut pas être utilisé dans la fonction existante. Ajoutez un nouveau comportement au comportement.

Afin d'obtenir l'effet de déclenchement séquentiel de deux fonctions, cela ne peut être obtenu qu'en créant une nouvelle méthode JavaScript. Le code JavaScript est le suivant :

window.onload = function () {
    one();
    two();
}

Bien que le code soit écrit en. cette façon peut résoudre certains problèmes, mais elle ne peut toujours pas répondre à certains besoins. Par exemple, s'il existe plusieurs fichiers JavaScript, chaque fichier doit utiliser la méthode window.onload. Dans ce cas, il sera très difficile d'écrire du code à l'aide de la méthode window.onload. méthode mentionnée ci-dessus. Vous pouvez vous référer à l'événement onload partagé Javascript, et la méthode $(document).ready() de jQuery peut bien gérer ces situations. Chaque appel à la méthode $(document).ready() ajoutera un nouveau comportement au comportement existant. , ces fonctions de comportement seront exécutées séquentiellement selon l'ordre d'enregistrement. Par exemple, le code jQuery suivant :

function one() {
    alert("one");
}
function two() {
    alert("two");
}
$(document).ready(function () {
    one();
});
$(document).ready(function () {
    two();
})

Après avoir exécuté le code, la boîte de dialogue de chaîne "un" apparaîtra, puis la boîte de dialogue de chaîne "deux" apparaîtra

Pour pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

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!