細說document.ready和window.onload

時間 2019-11-16

標籤細說 document.ready document ready window.onload window onload 欄目 JavaScript 简体版

原文原文鏈接

原文

　　簡書原文：https://www.jianshu.com/p/bbf28d61aa1fjavascript

大綱

　　一、對頁面加載的認識
　　二、關於document.ready()
　　三、關於document.onload()
　　四、document.ready和window.onload的區別
　　五、爲何要使用document.ready()或者document.onload()
　　六、document.ready()的使用場景css

一、對頁面加載的認識

　　通常狀況下，一個頁面的相應加載順序是：域名解析——>加載html——>加載js和css——>加載圖片等其餘信息。html

二、關於document.ready()

　　執行時機：在DOM徹底就緒時就能夠被調用。
　　屢次使用：在同一個文件中屢次使用，一次調用。
　　理解：document.ready()的意思是在DOM加載完成以後執行ready()方法中的代碼，換句話說，這個方法的本意是爲了讓代碼的執行時間是在DOM加載完成以後纔開始執行。java

/*
  屢次使用：運行結果爲：先是one,而後是two
*/
function one(){
    alert("one");
}
function two(){
    alert("two");
}
$(document).ready(function(){
    one();
});
$(document).ready(function(){
    two();
});

/*
  寫法
*/
//jq的寫法
$(document).ready(function(){
    //do something
});
//簡寫，默認document
$().ready(function(){
    //do somethin
});
//簡寫
$(function(){
    //do something
});

三、關於document.onload()

　　執行時機：在網頁中全部元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行，即JavaScript此時能夠訪問網頁中的全部元素。
　　屢次執行：JavaScript的onload事件一次只能保存對一個函數的引用，他會自動調用最後面的函數覆蓋前面的函數。jquery

/*
  屢次使用：運行結果爲：只執行了two
*/
function one(){
    alert("one");
}
function two(){
    alert("two");
}

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

/*
  寫法
*/
window.onload = function(){
    //do something
}
//等價於
$(window).load(function(){
    //do something
})

四、document.ready和window.onload的區別

　　document.ready和window.onload的區別——JavaScript文檔加載完成事件。
　　頁面加載完成有兩種事件：
　　　　一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）。
　　　　二是onload，指示頁面包含圖片等文件在內的全部元素都加載完成。瀏覽器

五、爲何要使用document.ready()或者document.onload()

　　$(document).ready() 裏的代碼是在頁面內容都加載完才執行的，若是把代碼直接寫到script標籤裏，當頁面加載完這個script標籤就會執行裏邊的代碼了，此時若是你標籤裏執行的代碼調用了當前還沒加載過來的代碼或者dom，那麼就會報錯，固然若是你把script標籤放到頁面最後面那麼就沒問題了，此時和ready效果同樣。app

六、document.ready()的使用場景

　　點擊段落，此段落隱藏

<html>
<head>
    <meta charset="utf-8">
    <title>
        test
    </title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p>If you click on me,I will disappear.</p>
</body>
</html>

　　若是把$(document).ready(function(){});去掉後，沒法隱藏段落

<html>
<head>
    <meta charset="utf-8">
    <title>
        test
    </title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $("p").click(function () {
            $(this).hide();
        });
    </script>
</head>
<body>
    <p>If you click on me,I will disappear.</p>
</body>
</html>

　　可是把script放到頁面最後的話，就可恢復隱藏效果

<html>
<head>
    <meta charset="utf-8">
    <title>
        test
    </title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>If you click on me,I will disappear.</p>
    <script>
        $("p").click(function () {
            $(this).hide();
        });
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。