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 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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
php你的验证码安全码?
2007/01/02 PHP
php header功能的使用
2013/10/28 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
实现复选框全选/全不选切换
2006/12/23 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
js 编写规范
2010/03/03 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python获取糗百图片代码实例
2013/12/18 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python 字符串池化的前提
2020/07/03 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
《跨越百年的美丽》教学反思
2014/02/11 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
代办社保委托书范文
2014/10/06 职场文书
合伙购房协议样本
2014/10/06 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python