JQuery中DOM加载与事件执行实例分析


Posted in Javascript onJune 13, 2015

本文实例讲述了JQuery中DOM加载与事件执行原理。分享给大家供大家参考。具体分析如下:

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件。例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件。虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。

以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。$(document).ready()方法是事件模块中最重要的一个函数,可以极大地提高Web应用程序的响应速度。jQuery就是用$(document).ready()方法来代替传统JavaScript的window.onload方法的。通过使用该方法,可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。在使用过程中,需要注意$(document).ready()方法和window.onload方法之间的细微区别。

执行时机

$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用。此时,网页的所有元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。

举一个例子,有一个大型的图库网站,为网页中所有图片添加某些行为,例如单击图片后让它隐藏或显示。如果使用window.onload方法来处理,那么用户必须等剑每一幅图片都加载完毕后,才可以进行操作。如果使用jQuery中的$(document).ready()方法来进行设置,只要DOM就绪就可以操作了,不需要等待所有图片下载完毕。很显然,把网页解析为DOM树的速度比把页面中的所有关联文件加载完毕的速度快很多。

另外,需要注意一点,由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件末下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用jQuery中另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。jQuery代码如下:

$(window).load(function(){  
    // 编写代码  
})

等价于JavaScript中的以下代码:

window.onload = function(){   
    // 编写代码   
})

现在详细讲解下windows.onload方法和$(document).ready()方法的区别:

假设网页中有两个函数,JavaScript代码如下:

function one(){  
  alert("one");  
}  
function two(){  
  alert ("two");  
}

当网页加载完毕后,通过如下JavaScript代码来分别调用one函数和two函数:

window.onload = one;  
window.onload = two;

然而当运行代码后,发现只弹出字符串“two”对话框。字符串“one”对话框不能被弹出的原因是JavaScript的onload事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数,因此不能在现有的行为上添加新的行为。

为了达到两个函数顺序触发的效果,只能再创建一个新的JavaScript方法来实现,Javascript代码如下:

window.onload = function(){  
    one();  
    two();  
}

虽然这样编写代码能解决某些问题,但还是不能满足某些需求,例如有多个JavaScript文件,每个文件都需要用到window.onload方法,这种情况下用上面提到的方法编写代码会非常麻烦。而jQuery的$(document).ready()方法能够很好地处理这些情况,每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。例如如下jQuery代码:

function one(){  
    alert("one");  
}  
function two(){  
    alert("two");  
}  
$(document).ready(function(){  
    one();  
})  
$(document).ready(function(){  
    two();  
});

运行代码后,会先弹出字符串“one”对话框,然后弹出字符串“two”对话框。

下面看看ready()与onload()的耗时:

jQuery的ready()耗时 : 498 ms

简写方式

上面我们ready函数写成这样:

$(document).ready(function(){  
    // 编写代码  
})

也可以简写成这样:

$(function(){  
  // 编写代码  
})

另外,$(document)也可以简写为$()。当$()不带参数时,默认参数就是“document”,因此可以简写为:

$().ready(function(){  
    // 编写代码  
})

3种方式都是一样的功能,读者可以根据自己的喜好,选择其中的一种。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
js实现日历的简单算法
Jan 24 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
AngularJS中的promise用法分析
May 19 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 #Javascript
JavaScript中的Math.E属性使用详解
Jun 12 #Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 #Javascript
JavaScript中的parse()方法使用简介
Jun 12 #Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 #Javascript
jQuery插件datepicker 日期连续选择
Jun 12 #Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python删除过期文件的方法
2015/05/29 Python
Python 对象中的数据类型
2017/05/13 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Django配置跨域并开发测试接口
2020/11/04 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
项目建议书模板
2014/05/12 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
房屋所有权证明
2014/10/20 职场文书
龙猫观后感
2015/06/09 职场文书
终止合同协议书范本
2016/03/22 职场文书
python实现高效的遗传算法
2021/04/07 Python