最近一直在研究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的区别的更多相关文章

  1. $(function(){})与window.onload的区别

    不太一样window.onload是在页面所有的元素都加载完成后才触发$(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成比如说一个页面有好多图片 而 ...

  2. $(function(){})和window.onload的区别

    (1)$(function(){}):DOM节点创建 完成才执行 (2)window.onload:页面所有资源(JS/CSS)加载完成才执行

  3. JQ的ready()方法与window.onload()的区别与联系

    JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系:   $(document).ready() windo ...

  4. jQuery中$(document).ready()和window.onload的区别?

    document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...

  5. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  6. $(document).ready() 、 $('#id').load() 、window.onload 的区别

    今天做项目的时候遇到一个问题,结果死在了$(document).ready(). $('#id').load() .window.onload的区别上.然后,就整理一下,这三者的区别. 参考文章:ht ...

  7. body里面的onload和window.onload的区别

    区别:body里面的onload是在“页面加载完成后执行的动作” window里面的onload是在“页面加载时执行的动作” 例子:在html页面中有一个大图片,想要在图片显示出来后提示一个消息框“图 ...

  8. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

  9. 深入理解,函数声明、函数表达式、匿名函数、立即执行函数、window.onload的区别.

    一.函数声明.函数表达式.匿名函数1.函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 2.函数表达式 var fnNam ...

随机推荐

  1. Ubuntu 14.04 设置Android开发环境

    准备Java环境 本文仅仅安装sdk,不安装什么IDE,由于我仅仅须要命令行模式开发就可以. 首先安装openjdk 1.6.然后安装ant.这个不赘述. 下载SDK 从这里下载SDK for Lin ...

  2. 打地鼠游戏iOS源代码项目

    打地鼠游戏源代码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源代码.这也是一款高质量的打地鼠游戏源代码.能够拥有逐步上升的关卡的设置,大家能够在关卡时设置一些商业化的模式来盈利的,很完美的 ...

  3. 高级类特性----final关键字

    final 关键字 在Java中声明类.属性和方法时,可使用关键字final来修饰. final标记的变量(成员变量或局部变量)即成为常量,只能赋值一次. final标记的类不能被继承.提高安全性,提 ...

  4. Python 爬虫知识点 - 淘宝商品检索结果抓包分析

    一.抓包基础 在淘宝上搜索“Python机器学习”之后,试图抓取书名.作者.图片.价格.地址.出版社.书店等信息,查看源码发现html-body中没有这些信息,分析脚本发现,数据存储在了g_page_ ...

  5. 前端 ui 框架

    Bootstrap:http://getbootstrap.com/css/ ant-design:https://ant.design/ weui:https://weui.io/ amazeui: ...

  6. 安全日志:/var/log/secure

    /var/log/secure 一般用来记录安全相关的信息,记录最多的是哪些用户登录服务器的相关日志,如果该文件很大,说明有人在破解你的 root 密码 [root@localhost ~]$ tai ...

  7. oracle SUM函数

    select change_type as change_type, sum(points1) as points from (select DECODE(p.change_type, , ' 兑换商 ...

  8. M0 M4之Timer初始化

    新唐的定时器一般有很多功能:普通的定时功能,事件计数功能,捕获功能,超时触发ADC等等.大家如果感兴趣可以读一下<NANOB Timer功能介绍以及在弱灌注中的应用.pdf>,虽然各个系列 ...

  9. 域名绑定和域名解析(DNS)有什么不同?(转载)

    域名解析在DNS处设置,DNS服务器将你的域名指向你的存储网页的服务器. 域名绑定在服务器中设置,存储你网页文件的服务器绑定了你的域名才能把浏览者引导到这个域名指定的物理位置来访问. 比如,你进一个高 ...

  10. 微信小程序 --- 下拉刷新上拉加载

    查看文档看到:page()函数注册页面的时候,有 onPullDownRefresh 监听用户下拉动作,onReachBottom 页面上拉触底事件的函数. 在小程序里,用户顶部下拉是默认禁止的,我们 ...