jQueryロードイベントLOGIN

jQueryロードイベント

読み込みイベント

javascript読み込みイベント:

<body onload = "function()">

window.onload = function(){}


jqueryロードイベントの実装

① $(document).ready(function process);

② $().ready(function process);

③ $(function process); だけです。パッケージ

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


jqueryの読み込みイベントと従来の読み込みイベントの違い

設定の数

同じリクエスト内で、jqueryは複数の設定を設定でき、従来の方法は可能です1 つだけ設定します

従来の方法では、onload イベント属性に値を割り当てます。複数回割り当てた場合、後者で前者が上書きされます。

イベントをロードする jquery メソッドは、各ロード イベントを配列に格納し、実行時に配列の要素になるだけで、配列を走査して各要素を実行するため、複数のロード イベントを設定できます。

実行タイミングが異なります

従来の読み込みイベントは、すべてのコンテンツ(テキスト、画像、スタイル)がブラウザに表示された後に読み込みイベントを実行します。

JQuery 読み込みイベントは、すべてのコンテンツ (テキスト、画像、スタイル) がメモリ内の対応する DOM ツリー構造に描画されている限り実行されます。対応するコンテンツがブラウザーに表示されていない可能性があります。

りー




次のセクション
<!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>
コースウェア