1. 最近一直在研究jq的源码,书写jq的代码我们通常会包裹在一个$(function(){})函数中,
    jq$(function(){})也就是$(document).ready(function(){})的简写,与之对应的原生jswindow.onload事件,这俩者之间到底有什么区别呢?
    $(function () {
  2. console.log("ready执行");
  3. });
  4. $(function() {
  5. console.log("ready1执行");
  6. });
  7. window.onload = function () {
  8. console.log('load执行');
  9. };
  10. window.onload = function () {
  11. console.log('load1执行');
  12. }

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

这里可以看出两点不同: 
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. 超全面的JavaWeb笔记day12<Jsp&JavaBean&El表达式>

    1.JSP三大指令 page include taglib 2.9个内置对象 out page pageContext request response session application exc ...

  2. wsdl.exe的用法与参数说明

    wsdl.exe的用法与参数说明 打开.net自己带的Visual Studio .NET 2003或 2005 命令提示 输入 wsdl /language:VB /n:mynamespace /o ...

  3. 关于直播学习笔记-005-nginx-rtmp-win32在Win10上使用

    在Win10上使用nginx-rtmp-win32会提示文件路径问题. 可以将nginx-rtmp-win32拷贝到用户目录文件夹之中. 在命令行中执行nginx.exe程序

  4. hadoop程序MapReduce之DataDeduplication

    需求:去掉文件中重复的数据. 样板:data.log 2016-3-1 a 2016-3-2 b 2016-3-2 c         2016-3-2 b 输出结果: 2016-3-1 a 2016 ...

  5. oracle 与mysql 的当前时间比较

    select p.id,p.order_Num,p.image_url,p.url,p.image_topic, p.is_download, p.big_image_url, p.begin_tim ...

  6. const T* 和 T* const

    使用c++的时候,经常会在 const int *p 和 int * const p这个地方迷惑.这里记录一下: const int *p  = int const *p //这里const后面的为* ...

  7. ansible的入门级使用

      author: headsen  chen   date: 2018-08-02   11:46:35 1,ansible的安装 yum install epel-release yum -y i ...

  8. 【BZOJ4099】Trapped in the Haybales Gold STL

    [BZOJ4099]Trapped in the Haybales Gold Description Farmer John has received a shipment of N large ha ...

  9. [XML] CoolFormat

    http://files.cnblogs.com/files/wjs16/CoolFormat3.4.rar

  10. Android中textView自动识别电话号码,电子邮件,网址(自动加连接)

    extends:http://blog.csdn.net/wx_962464/article/details/8471195 其实这个是很简单的,在android中已经为我们实现了,但是我估计很多人都 ...