jq $(function(){ })
$(function(){ }) 是$(document).ready(function(){})的简写,也可以写
成$().ready(function(){}),网上看到过$(document).ready(function(){})
和$(function(){ }) 同时存在时先执行$(document).ready(function(){})再
执行$(function(){ })。
原生 js 的window.onload事件与之比较:
如下代码:
$(function () {
console.log("111");
});
$(function() {
console.log("222");
});
window.onload = function () {
console.log('333');
};
window.onload = function () {
console.log('444');
}
输出结果:
111 222 444
(function(){})不会被覆盖,可以写多个,而window.onload会被覆盖,
$ (function(){})在window.onload执行前执行的,$(function(){})在 DOM 加载完毕后(*什么时候,DOM 加载完成了呢?即页面所有的 html 标签(包括图片等)都加载完了,即浏览器已经响应完了,加载完了,全部展现到浏览器界面上了*)被执行,而window.onload会在页面资源全部加载完毕后才会执行。
DOM 文档加载步骤:
- 解析 HTML 结构
- 加载外部的脚本和样式文件
- 解析并执行脚本代码
- 执行 $(function(){}) 内对应代码
- 加载图片等二进制资源
- 页面加载完毕,执行 window.onload