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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
微信小程序实现弹框效果
May 26 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
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Cython 三分钟入门教程
2009/09/17 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
linux下python抓屏实现方法
2015/05/22 Python
Python实现的简单算术游戏实例
2015/05/26 Python
python批量制作雷达图的实现方法
2016/07/26 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python基于opencv检测程序运行效率
2019/12/28 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
请介绍一下Ant
2016/07/22 面试题
本科毕业生自荐信
2014/05/26 职场文书
社会实践活动总结
2015/02/05 职场文书
信访维稳承诺书
2015/05/04 职场文书
初二英语教学反思
2016/02/15 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python