jQuery中document与window以及load与ready 区别详解


Posted in Javascript onDecember 29, 2014

用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单。

首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象。

二者有啥区别呢?很好理解,假设现在有一个浏览器,里边加载的页面特别长,已经超出了一屏,当然,肯定会出现滚动条了,这时候,$(window).height()和$(document).height()是不相等的,document的高度肯定要比window的大,因为window窗口始终就是那么大。见下图:

jQuery中document与window以及load与ready 区别详解

再说说load事件和ready事件(这里的load和ready是指jQuery的事件,下同)。

先说load,load事件主要就是用来代替原生的window.onload,它只能用在两个场景下:

· window对象上。比如$(window).load(fn);。

· 带有URL的元素(images, scripts, frames, iframes)。比如$(“img”).load(fn);。

除此之外,任何元素都没有load事件,比如:$(document).load(fn);这是错误的写法,根本不会执行。

load事件需要页面完全加载完成才可以触发,所谓的完全加载完,不仅仅是dom结构加载完,还需要所有的链接引用都加载完才可以。比如页面中有大量图片,必须等每一个图片都加载完成,才叫完全加载完。

最重要的还没说,jQuery官方文档明确说明load事件的跨浏览器兼容性很差(It doesn't work consistently nor reliably cross-browser)。经过小菜测试,谷歌浏览器仅仅支持$(window).load(fn);,而火狐浏览器支持$(window).load(fn);和$(“img”).load(fn);。

所以,除非必要情况下,否则强烈不推荐使用load事件。

最后说说ready,ready事件可以加在任意元素上,比如$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn);等等。

ready事件不要求页面完全加载完,只需要加载完dom结构即可触发。

ready事件可以同时注册多个,执行时,按照注册的先后顺序执行。注意,就算是注册不同元素的ready事件,也是按照先后顺序执行。例如下列代码:

$(window).ready(function(){

  alert("window");

});

$(document).ready(function(){

  alert("document");

});

$("div").ready(function(){

  alert("div");

});

按照常理,应该是div先加载完,所以先执行alert("div");,然后才是alert("document");或alert("window");,但遗憾的是,alert("div");是最后一个执行的。所以,无论是否在同一元素上注册ready事件,都是按照注册的先后顺序执行。

最后一项,ready事件与window.onload(或<body onload=””>)是冲突的,如果使用了window.onload(或<body onload=””>),将导致ready事件不执行。

经过如此多的讨论,最终证明:$(document).ready(fn);兼容性、安全性是最好的,如果有此类需求,尽量采用这种方式。

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue实现简单图片上传
Jun 30 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
JavaScript中的Proxy对象
Nov 27 Javascript
jQuery中:header选择器用法实例
Dec 29 #Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 #Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 #Javascript
JavaScript中的数学运算介绍
Dec 29 #Javascript
jQuery中:lt选择器用法实例
Dec 29 #Javascript
JavaScript中的数值范围介绍
Dec 29 #Javascript
JavaScript常用小技巧小结
Dec 29 #Javascript
You might like
php define的第二个参数使用方法
2013/11/04 PHP
Web程序工作原理详解
2014/12/25 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python常用数据重复项处理方法
2019/11/22 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
三下乡活动方案
2014/01/31 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
导游个人求职信
2014/04/25 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js