jquery $(document).ready() 与window.onload的区别
2015-08-28 09:38
435 查看
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。
1.执行时间
2.编写个数不同
例:
以下代码无法正确执行:结果只输出第二个
以下代码会正确执行:两次结果都输出
3.简化写法
ps:
网上有说:IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行
例:
以下代码无法正确执行:结果只输出第二个
window.onload = function(){ alert("function 1"); }; window.onload = function(){ alert("function 2"); };
以下代码会正确执行:两次结果都输出
$(document).ready(function(){ alert("function 1"); }); $(document).ready(function(){ alert("function 2"); });
3.简化写法
window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){});
ps:
网上有说:IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到
相关文章推荐
- 让jquery弹出窗口不被阻挡
- jQuery制作返回页面顶部
- jquery实现带缩略图的可定制高度画廊效果(5种)
- 通过XMLHttpRequest和jQuery实现ajax的几种方式
- jquery.dataTables动态列
- jQuery实现平滑滚动的标签分栏切换效果
- jQuery入门:Data方法
- jquery图片滚动放大代码分享(2)
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
- 利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字
- JQuery实现数字滚动增加的效果
- jquery图片滚动放大代码分享(2)
- jQuery实现平滑滚动的标签分栏切换效果
- 通过XMLHttpRequest和jQuery实现ajax的几种方式
- jquery实现带缩略图的可定制高度画廊效果(5种)
- jQuery表单验证功能实例
- jquery实现的用户注册表单提示操作效果代码分享
- jquery实现多条件筛选特效代码分享
- jquery实现的弹出层登录和全屏层注册特效代码分享
- jQuery实现表单步骤流程导航代码分享