Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

  1)执行时间 
  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
  $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

  2)编写个数不同 
  window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
  $(document).ready()可以同时编写多个,并且都可以得到执行 
  3)简化写法 
  window.onload没有简化写法 
  $(document).ready(function(){})可以简写成$(function(){});

  以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

  window.onload $(document).ready()  

执行时机

必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完  

编写个数

不能同时编写多个 
以下代码无法正确执行: 
window.onload = function(){ 
   alert(“text1”); 
}; 
window.onload = function(){ 
   alert(“text2”); 
}; 
结果只输出第二个 
能同时编写多个 
以下代码正确执行: 
$(document).ready(function(){ 
   alert(“Hello World”); 
}); 
$(document).ready(function(){ 
   alert(“Hello again”); 
}); 
结果两次都输出  

简化写法

$(function(){ 
   // do something 
}); 

  另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

  参考资料:http://www.jb51.net/article/21628.htm

【jquery】$(document).ready() 与window.onload的区别的更多相关文章

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

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

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

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

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

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

  4. 转 $(document).ready()与window.onload的区别

    $(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...

  5. document.ready与window.onload的区别

    代码分析: $(document).ready(function() { .... }); window.onload=function(){ ....} 两段代码功能上可以互换,但又有许多区别: 1 ...

  6. $(document).ready和window.onload的区别

    $(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...

  7. $(document).ready 与 window.onload的区别?

    $(document).ready  = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...

  8. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  9. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  10. [Javascript]jquery $(document).ready() 与window.onload的区别

    引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...

随机推荐

  1. [Canvas]越来越近的女孩

    本作比前作增加了控制功能,观看动态效果请点此下载代码用Chrome或Firfox浏览器观看. 图例: 代码: <!DOCTYPE html> <html lang="utf ...

  2. MVC4发布到IIS,出现HTTP 错误 404.0 - Not Found

    web.config中添加 <system.webServer> <modules runAllManagedModulesForAllRequests="true&quo ...

  3. eclipse插件大全

    http://www.cnblogs.com/homezzm/archive/2009/11/27/1612054.html

  4. windows下根据进程ID强制杀死进程

    [windows 进程ID PID]NTSD命令详解 1. ntsd -c q -p PID 2. ntsd -c q -pn ImageName 比如:ntsd -c q -pn qq.exe -c ...

  5. Format Conditions按条件显示表格记录

    标记特定记录 DevExpress强大得确实让人觉得它别具一格!现在,我有这样一个需求,把一个表中某字段为False的记录标记出来.下面是效果(某字段的可见性为否): 实现方式 如果是以前,我写个代码 ...

  6. 如何设置iPhone的手机铃声?【来自星星的你】

    如果大家需要已经截取好的手机铃声,可以给我留言,写下邮箱号码. 谢谢. ---------------------------------------------------------------- ...

  7. 获取和设置URL里星号(#)的参数

    示例:http://gzmsg.com/go/news.aspx#page=12 var DF = {}; (function () { var a = function () { var d, e ...

  8. LintCode: Flatten Binary Tree to Linked List

    C++ Traverse /** * Definition of TreeNode: * class TreeNode { * public: * int val; * TreeNode *left, ...

  9. 第九周(1) Word邮件合并2

    第九周(1) Word邮件合并2 教学时间 2013-4-22 教学课时 2 教案序号 15 教学目标 1.进一步掌握邮件合并的技巧和方法.2.利用邮件合并制作准考证.3.掌握在同一页生成多个记录的方 ...

  10. 杂货&&心跳

    https://github.com/jsfront/month/blob/master/2016/201605.md https://github.com/abdmob/x2js https://l ...