$(document).ready() 里的代碼是在頁面內容都加載完才執(zhí)行的，如果把代碼直接寫到script標簽里，當頁面加載完這個script標簽就會執(zhí)行里邊的代碼了，此時如果標簽里執(zhí)行的代碼調用了當前還沒加載過來的代碼或者dom，那么就會報錯，當然如果把script標簽放到頁面最后面那么就沒問題了，此時和ready效果一樣。
$(document).ready(function(){})可以簡寫成$(function(){});
注意：
jQuery中$(document).ready()的作用類似于傳統(tǒng)JavaScript中的window.onload方法，不過與window.onload方法還是有區(qū)別的。后面的文章會具體講解它們之間的區(qū)別，今天先說明一下$(document).ready(function(){})的應用。
舉一個簡單的例子說明。當點擊div后，我們將一個div隱藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>
<script>
$(document).ready(function () {
$("div").click(function(){
$(this).hide();
});
});
</script>
<style>
div{
width:100px;
height:100px;
background-color: #8ad6ff;
}
</style>
</head>
<body>
<div>點擊div，隱藏此div</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>
<script>
$("div").click(function(){
$(this).hide();
});
</script>
<style>
div{
width:100px;
height:100px;
background-color: #8ad6ff;
}
</style>
</head>
<body>
<div>點擊div，隱藏此div</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>
<style>
div{
width:100px;
height:100px;
background-color: #8ad6ff;
}
</style>
</head>
<body>
<div>點擊div，隱藏此div</div>
</body>
<script>
$("div").click(function(){
$(this).hide();
});
</script>
</html>
$(document).ready 里的代碼是在頁面內容都加載完才執(zhí)行的，如果直接寫到script標簽里，當頁面加載完這個script標簽就會執(zhí)行里邊的代碼了，如果標簽里執(zhí)行的代碼調用了當前還沒加載過來的代碼或者dom，那么就會報錯。但是如果把script標簽當到頁面最后面那么就沒問題，可以達到和ready差不多的效果。
$(document).ready() 方法是事件模塊中最重要一個函數，可以極大的提高 Web 應用程序的速度。需要注意一點，由于在 $(document).ready() 方法內注冊的事件，只要 DOM 就緒就會被執(zhí)行，因此可能此時元素的關聯文件未下載完。例如與圖片有關的 html 下載完畢，并且已經解析為 DOM 樹了，但很有可能圖片還沒有加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。
分享一些技術學習視頻資料：https://pan.baidu.com/s/13dbR69NLIEyP1tQyRTl4xw
聯系客服
