原生js：將獲取元素的語句寫到頁面頭部，會因為元素還沒有加載而出錯，js提供了window.onload 這個方法事先加載元素
<script type="text/javascript">
window.onload = function(){
......
};
</script>
jquery：將獲取元素的語句寫到頁面頭部，會因為元素還沒有加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
可以簡寫為：
<script type="text/javascript">
$(function(){
......
});
</script>
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 1 原生js加載頁面元素，window.onload()
window.onload = function(){
var oDiv = document.getElementById('div1');
alert('原生彈出的'+oDiv);
};
// 2 jquery加載頁面元素，ready()
// 2.1 ready完整寫法：
$(document).ready(function(){
var $div=$('#div1');
alert('這是jquery彈出的'+$div);
});
// 2.2 ready簡單寫法(開發中最常用)：
$(function(){
var $div=$('#div1');
alert('這是jquery彈出的'+$div);
});
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
</body>
</html>
總結：
- 原生js加載頁面元素通過window.onload()方法
- jquery加載頁面元素通過ready()方法
- 開發中常用jquery的ready簡寫寫法
- 使用jquery需要事先下載jquery庫(壓縮版和完整版，開發中加載壓縮版即可，完整版用於平時讀源碼)，用srcipt標簽導入jquery庫的壓縮版
- 使用jquery庫需要另寫一個script標簽，在里面寫jquery代碼
- ready比windown.load要快的原因是，window.load是等標簽加載完，渲染(一些資源文件，如圖片，音樂等)完之后再執行，ready是個標簽加載完就執行
