jquery $(document).ready()和window.onload的区别浅析


Posted in Javascript onFebruary 04, 2015

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,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

$(document).ready(function(){

…

});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的

元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就

需要用到:

$(window).load(function() {

…
});

总结对比:

jquery $(document).ready()和window.onload的区别浅析

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
ajax异步请求详解
Jan 06 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 #Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 #Javascript
Javascript中实现trim()函数的两种方法
Feb 04 #Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 #Javascript
JavaScript检测实例属性, 原型属性
Feb 04 #Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 #Javascript
js对字符的验证方法汇总
Feb 04 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
JavaScript字符串对象
2017/01/14 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python实现祝福弹窗效果
2019/04/07 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
歌颂祖国演讲稿
2014/05/04 职场文书
北京天坛导游词
2015/02/12 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python