Analyse des exemples de chargement DOM et d'exécution d'événements dans JQuery_jquery

Les exemples de cet article décrivent les principes de chargement du DOM et d'exécution d'événements dans JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

L'interaction entre JavaScript et HTML est gérée via des événements déclenchés lorsque l'utilisateur et le navigateur exploitent la page. Lorsque certains changements ou opérations surviennent dans le document ou dans certains de ses éléments, le navigateur génère automatiquement un événement. Par exemple, lorsque le navigateur charge un document, un événement est généré : lorsque l'utilisateur clique sur un bouton, un événement est également généré. Bien que ces interactions puissent être réalisées à l'aide d'événements JavaScript traditionnels, jQuery ajoute et étend les mécanismes de base de gestion des événements. jQuery fournit non seulement une syntaxe de gestion des événements plus élégante, mais améliore également considérablement les capacités de gestion des événements.

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() est la fonction la plus importante du module d'événements, qui peut considérablement améliorer la vitesse de réponse des applications Web. jQuery utilise la méthode $(document).ready() pour remplacer la méthode JavaScript traditionnelle window.onload. En utilisant cette méthode, vous pouvez manipuler le DOM et appeler les fonctions auxquelles il est lié lors de son chargement. Lors de l'utilisation, vous devez faire attention aux différences subtiles entre la méthode $(document).ready() et la méthode window.onload.

Délai d'exécution

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 tous 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 fonctionner tant 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.

De plus, il est à noter que puisque l'événement enregistré dans la méthode $(document).ready() sera exécuté tant que le DOM sera prêt, le fichier associé à l'élément ne pourra pas être téléchargé à ce moment . 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(){   
    // 编写代码   
})

Expliquons maintenant en détail la différence entre la méthode windows.onload et la méthode $(document).ready() :

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, appelez respectivement la fonction une et les deux fonctions via le code JavaScript suivant :

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

Cependant, après avoir exécuté le code, il a été constaté que seule la boîte de dialogue de chaîne « deux » apparaissait. La raison pour laquelle la boîte de dialogue de chaîne « un » ne peut pas s'afficher 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, de sorte qu'un nouveau comportement ne pourra pas y être ajouté. le comportement existant.

Afin d'obtenir l'effet de déclenchement séquentiel des deux fonctions, nous ne pouvons créer qu'une nouvelle méthode JavaScript pour y parvenir. Le code Javascript est le suivant :

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

Bien qu'écrire du code de cette manière puisse résoudre certains problèmes, il 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, utilisez la méthode mentionnée. ci-dessus. Écrire du code peut être pénible. La méthode $(document).ready() de jQuery peut très bien gérer ces situations. Chaque fois que la méthode $(document).ready() est appelée, de nouveaux comportements seront ajoutés aux comportements existants. Ces fonctions de comportement seront basées. sur l'enregistrement sont exécutés dans l'ordre. Par exemple, le code jQuery suivant :

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

运行代码后，会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。

下面看看ready()与onload()的耗时：

jQuery的ready()耗时 : 498 ms

简写方式

上面我们ready函数写成这样：

$(document).ready(function(){  
    // 编写代码  
})

也可以简写成这样：

$(function(){  
  // 编写代码  
})

另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”，因此可以简写为：

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

3种方式都是一样的功能，读者可以根据自己的喜好，选择其中的一种。

希望本文所述对大家的jQuery程序设计有所帮助。