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中的ArrayBuffer详细介绍
Dec 08 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 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
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
php json转换相关知识(小结)
2018/12/21 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
angularjs实现分页和搜索功能
2018/01/03 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现Adapter模式实例代码
2018/02/09 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python颜色随机生成器的实例代码
2020/01/10 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
英语自荐信常用语句
2013/12/13 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
租房协议书
2014/09/12 职场文书
教师党员个人自我评价
2015/03/04 职场文书
农业项目投资意向书
2015/05/09 职场文书
2016中秋节问候语
2015/11/11 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python