Événement de chargement
Événement de chargement javascript :
<body onload = "function ( )">
window.onload = function(){}
Implémentation de l'événement de chargement jquery
① $(document).ready(fonction traitement);
② $().ready( fonction traitement);
③ $(function traitement); C'est juste une encapsulation du premier type de chargement
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
//① $(document).ready(加载事件处理函数);
////$(document) 创建一个jquery对象，内部有dom组成部分：document
//$(document)[0]-------获得-------->document对象
$(document).ready(function(){
console.log(123);
});
//② $().ready(加载事件处理函数)
//$() 创建一个jquery对象，内部没有dom组成部分
$().ready(function(){
console.log(456);
});
//③ $(function加载事件处理函数);
$(function(){
console.log(789);
});
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
La différence entre les événements de chargement jquery et les événements de chargement traditionnels
Nombre de paramètres
Dans la même requête, jquery Plusieurs paramètres peuvent être définis, mais un seul peut être défini de manière traditionnelle
La manière traditionnelle de charger des événements consiste à attribuer une valeur à l'attribut d'événement onload s'il est attribué plusieurs fois, ce dernier écrasera. le premier.
La méthode jquery de chargement des événements consiste à stocker chaque événement de chargement dans un tableau et à devenir un élément du tableau lors de l'exécution, il suffit de parcourir le tableau et d'exécuter chaque élément, afin qu'il puisse définir plusieurs événements de chargement.
Le timing d'exécution est différent
L'événement de chargement traditionnel consiste à exécuter l'événement de chargement une fois que tout le contenu (texte, images, styles) est affiché dans le navigateur.
L'événement de chargement en mode Jquery est exécuté tant que tout le contenu (texte, images, styles) est dessiné dans l'arborescence DOM correspondante dans la mémoire. Il est possible que le contenu correspondant n'ait pas encore été affiché dans. le navigateur.
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
window.onload = function(){
console.log('abc');
}
$(function(){
console.log('def');
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>加载事件区别</h2>
</body>
</html>
section suivante