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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
Ajax实现异步加载数据
Nov 17 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
php5.2时间相差8小时
2007/01/15 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
js+css在交互上的应用
2010/07/18 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jQuery实现跨域
2015/02/03 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
基于JSON数据格式详解
2017/08/31 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python集合类型用法分析
2015/04/08 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
详解python中的异常和文件读写
2021/01/03 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
初中科学教学反思
2014/01/21 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
诉前财产保全担保书
2014/05/20 职场文书
重阳节活动主持词
2015/07/04 职场文书
生活小常识广播稿
2015/08/19 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技