原文
簡書原文：https://www.jianshu.com/p/bbf28d61aa1f
大綱
1、對頁面加載的認識
2、關於document.ready()
3、關於document.onload()
4、document.ready和window.onload的區別
5、為什么要使用document.ready()或者document.onload()
6、document.ready()的使用場景
1、對頁面加載的認識
一般情況下，一個頁面的相應加載順序是：域名解析——>加載html——>加載js和css——>加載圖片等其他信息。
2、關於document.ready()
執行時機：在DOM完全就緒時就可以被調用。
多次使用：在同一個文件中多次使用，一次調用。
理解：document.ready()的意思是在DOM加載完成之后執行ready()方法中的代碼，換句話說，這個方法的本意是為了讓代碼的執行時間是在DOM加載完成之后才開始執行。
/*
多次使用：運行結果為：先是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、關於document.onload()
執行時機：在網頁中所有元素(包括元素的所有關聯文件)完全加載到瀏覽器后才執行，即JavaScript此時可以訪問網頁中的所有元素。
多次執行：JavaScript的onload事件一次只能保存對一個函數的引用，他會自動調用最后面的函數覆蓋前面的函數。
/*
多次使用：運行結果為：只執行了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的區別
document.ready和window.onload的區別——JavaScript文檔加載完成事件。
頁面加載完成有兩種事件：
一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）。
二是onload，指示頁面包含圖片等文件在內的所有元素都加載完成。
5、為什么要使用document.ready()或者document.onload()
$(document).ready() 里的代碼是在頁面內容都加載完才執行的，如果把代碼直接寫到script標簽里，當頁面加載完這個script標簽就會執行里邊的代碼了，此時如果你標簽里執行的代碼調用了當前還沒加載過來的代碼或者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>