【jquery】$(document).ready() 与window.onload的区别
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的区别的更多相关文章
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- 转 $(document).ready()与window.onload的区别
$(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...
- document.ready与window.onload的区别
代码分析: $(document).ready(function() { .... }); window.onload=function(){ ....} 两段代码功能上可以互换,但又有许多区别: 1 ...
- $(document).ready和window.onload的区别
$(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...
- $(document).ready 与 window.onload的区别?
$(document).ready = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...
- 谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...
- JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
随机推荐
- Objective-C 简介
很少有人会想到 Objective-C 历史悠久,并且它实际上影响了很多其他的编程技术.比如, Java 编程语言和 Objective-C 就有很多共同点.原因就是在 Objective-C 的早期 ...
- .NET 托管、非托管、本地:这些代码有什么区别?
http://www.codeguru.com/Csharp/.NET/cpp_managed/article.php/c4871 本文内容 什么是托管代码? 什么是非托管代码? 什么是本地代码? 托 ...
- 使用Jmeter对API进行性能测试
先补充刚才测试的部分截图余下,后续详细补充内容. API Test.jmx 如下: <?xml version="1.0" encoding="UTF-8" ...
- Selenium2(WebDriver)总结(二)---Firefox的firebug插件参数设置(补充)
本文是对上一节的补充:http://www.cnblogs.com/puresoul/p/4251536.html 使用Selenium2(webdriver)启动firefox且自动加载firebu ...
- poj 3042 Grazing on the Run
这个题目原型应该是吃完所有的草丛的最小时间,现在变成了每个草丛被吃的时间和,貌似如果还是按照原来的dp方法dp[i][j]表示吃完i到j的草丛的花掉的时间的话,有两个因素会影响后面的决策,一个是花掉的 ...
- VMware vSphere 5.1 群集深入解析(一)
http://virtualbox.blog.51cto.com/531002/1168293 VMware vSphere 5.1 Clustering Deepdive HA.DRS.Storag ...
- 开发JAVA9以上的项目时,出现ClassNotFoundException: javax.xml.bind.JAXBException的解决方法
一.问题描述: 开发JAVA9以上的项目时,出现ClassNotFoundException: javax.xml.bind.JAXBException的解决方法 二.问题样例 三.解决方案 打开mv ...
- 创建Python程序
1. 创建Python程序 欢迎来到Python世界! 本系列文章告诉你怎么样编写Python程序.Python仅仅是一种文本文件.跟普通文本文件是一样的,仅仅只是这样的文本文件不但能够看,还能够在P ...
- 写一个function,清除字符串前后的空格。(兼容所有浏览器)
代码: function trim(str) { if (str && typeof str === "string") { return str.replace( ...
- PowerDesigner使用笔记
一:PDM模版使用 1:新建model:File——new model——选择PDM,填上名字.数据库类型 2:右侧工具类使用 3:创建表与配置 点击右侧工具栏中table控件,移动到模版面板内点击一 ...