jQuery載入事件

載入事件

javascript的載入事件:

<body  onload = 「函數()」>

window.onload = function(){}


## jquery載入事件實作

① $(document).ready(function處理);

② $().ready( function處理);

③ $(function處理);  對第一種載入的封裝而已

<!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的可以設定多個,而傳統方式只能設定一個

###傳統方式載入事件是給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>
        window.onload = function(){
            console.log('abc');
        }
        $(function(){
            console.log('def');
        });
        </script>

        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>加载事件区别</h2>
    </body>
</html>
#####################
繼續學習
||
<!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>