老生常談document.ready和window.onload

更新時間：2024年01月03日 15:17:28 作者：前端路上的小兵

這篇文章主要介紹了document.ready和window.onload的相關(guān)知識,包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧

1、對頁面加載的認識

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

2、關(guān)于document.ready()

　　執(zhí)行時機：在DOM完全就緒時就可以被調(diào)用。
　　多次使用：在同一個文件中多次使用，一次調(diào)用。
　　理解：document.ready()的意思是在DOM加載完成之后執(zhí)行ready()方法中的代碼，換句話說，這個方法的本意是為了讓代碼的執(zhí)行時間是在DOM加載完成之后才開始執(zhí)行。

/*
  多次使用：運行結(jié)果為：先是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
});

3、關(guān)于document.onload()

　　執(zhí)行時機：在網(wǎng)頁中所有元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行，即JavaScript此時可以訪問網(wǎng)頁中的所有元素。
　　多次執(zhí)行：JavaScript的onload事件一次只能保存對一個函數(shù)的引用，他會自動調(diào)用最后面的函數(shù)覆蓋前面的函數(shù)。

/*
  多次使用：運行結(jié)果為：只執(zhí)行了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
})

4、document.ready和window.onload的區(qū)別

　　document.ready和window.onload的區(qū)別——JavaScript文檔加載完成事件。
　　頁面加載完成有兩種事件：
　　　　一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）。
　　　　二是onload，指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。

5、為什么要使用document.ready()或者document.onload()

　　$(document).ready() 里的代碼是在頁面內(nèi)容都加載完才執(zhí)行的，如果把代碼直接寫到script標簽里，當頁面加載完這個script標簽就會執(zhí)行里邊的代碼了，此時如果你標簽里執(zhí)行的代碼調(diào)用了當前還沒加載過來的代碼或者dom，那么就會報錯，當然如果你把script標簽放到頁面最后面那么就沒問題了，此時和ready效果一樣。

6、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>

到此這篇關(guān)于細說document.ready和window.onload的文章就介紹到這了,更多相關(guān)document.ready和window.onload內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: