$(function(){ })的使用

JQuery 的代码我们通常会包裹在一个$ (function(){})函数中，jq 的$ (function(){})也就是$(document).ready(function(){})的简写，与之对应的原生 js 的window.onload事件，这俩者之间到底有什么区别呢？

$(function () {
    console.log("ready执行");
});
 
$(function() {
    console.log("ready1执行");
});
 
window.onload = function () {
    console.log('load执行');
};
window.onload = function () {
    console.log('load1执行');
}

我们来看一下控制台中输出的结果：

ready执行
ready1执行
load1执行

这里可以看出两点不同：

1. $ (function(){})不会被覆盖，而window.onload会被覆盖，个人感觉$(function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。
2. $ (function(){})在window.onload执行前执行的，$(function(){})类似于原生 js 中的DOMContentLoaded事件，在 DOM 加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。

DOM 文档加载步骤：

1. 解析 HTML 结构
2. 加载外部的脚本和样式文件
3. 解析并执行脚本代码
4. 执行 $(function(){}) 内对应代码
5. 加载图片等二进制资源
6. 页面加载完毕，执行 window.onload