événement de chargement jQuery

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

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

événement de chargement jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]