原生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是个标签加载完就执行