$(function(){ })的使用
JQuery 的代码我们通常会包裹在一个$(function(){})函数中,jq 的$(function(){})也就是$(document).ready(function(){})的简写,与之对应的原生 js 的window.onload事件,这俩者之间到底有什么区别呢?$(function () {console.log("ready执行");});$(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 文档加载步骤:
- 解析 HTML 结构
- 加载外部的脚本和样式文件
- 解析并执行脚本代码
- 执行 $(function(){}) 内对应代码
- 加载图片等二进制资源
- 页面加载完毕,执行 window.onload
更多推荐
所有评论(0)