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 实用小技巧
Apr 07 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
js 获取、清空input type="file"的值(示例代码)
Dec 24 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
js实现无缝滚动图
Feb 22 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
python中二维阵列的变换实例
2014/10/09 Python
浅析python的Lambda表达式
2019/02/27 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python实现复制大量文件功能
2019/08/31 Python
python实现查找所有程序的安装信息
2020/02/18 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
采购主管岗位职责
2014/02/01 职场文书
小区文明倡议书
2014/05/16 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python