jq的$(function(){})与window.onload的区别
最近一直在研究jq的源码,书写jq的代码我们通常会包裹在一个$(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执行');
}
我们来看一下控制台中输出的结果:
这里可以看出两点不同:
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
jq的$(function(){})与window.onload的区别的更多相关文章
- $(function(){})与window.onload的区别
不太一样window.onload是在页面所有的元素都加载完成后才触发$(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成比如说一个页面有好多图片 而 ...
- $(function(){})和window.onload的区别
(1)$(function(){}):DOM节点创建 完成才执行 (2)window.onload:页面所有资源(JS/CSS)加载完成才执行
- JQ的ready()方法与window.onload()的区别与联系
JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系: $(document).ready() windo ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- $(document).ready() 、 $('#id').load() 、window.onload 的区别
今天做项目的时候遇到一个问题,结果死在了$(document).ready(). $('#id').load() .window.onload的区别上.然后,就整理一下,这三者的区别. 参考文章:ht ...
- body里面的onload和window.onload的区别
区别:body里面的onload是在“页面加载完成后执行的动作” window里面的onload是在“页面加载时执行的动作” 例子:在html页面中有一个大图片,想要在图片显示出来后提示一个消息框“图 ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- 深入理解,函数声明、函数表达式、匿名函数、立即执行函数、window.onload的区别.
一.函数声明.函数表达式.匿名函数1.函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 2.函数表达式 var fnNam ...
随机推荐
- 【观点】“马云:金融是要为外行人服务",这个观点其实并不新鲜
不久前,马云在外滩国际金融峰会演讲,称金融行业需要“搅局者”.他说:“今天的金融,确实做得不错,没有今天这样的金融机构,中国的经济30年来不可能发展到今天,但是靠今天银行的机制,我不相信能支撑30年以 ...
- 好的 Web 前端年薪会有多少?
只是一个范围参考,主要是看能力而定. 1. 切图熟练.能写一些JS效果(HTML+CSS+jQuery):5K~10K+2. 具备第一条,并可以熟练用JS开发各种组件:8K-15K+3. 具备第二条, ...
- fiddler抓包,搞定接口
上篇介绍的世纪佳缘登录是由已有cookie保持登录状态的.世纪佳缘登陆不需要填入验证码,可以很方便直接请求登录接口来达到登录状态的目的. 这篇介绍直接从登录接口进行登录,那么这就要求要找到登录接口ur ...
- python2.7中关于编码,json格式的中文输出显示
当我们用requests请求一个返回json的接口时候, 语法是 result=requests.post(url,data).content print type(result),result 得到 ...
- [jquery] jQuery 选择器>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [java] Unsupported major.minor version 51.0 错误解决方案
jdk1.6工程中使用外部jar包中类出现:Unsupported major.minor version 51.0原因分析:出现上述错误是因为:外部jar包使用jdk1.7(jdk7)编译,而使用此 ...
- 【RF库测试】DateTime库
术语说明: 1.Epoch指的是一个特定的时间:1970-01-01 00:00:00 UTC. 2.国际标准化组织的国际标准ISO 8601是日期和时间的表示方法,格式是 'YYYY-MM-DD h ...
- Android底层有一定的认识,研究过相关的Android源码
一.系统架构: 一).系统分层:(由下向上)[如图] 1.安卓系统分为四层,分别是Linux内核层.Libraries层.FrameWork层,以及Applications层: 其中Linux内核层包 ...
- 上传控件CSS用图片代替
<style type="text/css"> a.btn {width: 120px;height: 42px;overflow: hidden;display: b ...
- 【VUE】Mac下vue 开发环境搭建,以及目录结构
1 安装Node.js 参看 node.js环境安装 http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...