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 相关文章推荐
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
完美的js图片轮换效果
Feb 05 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php实现word转html的方法
2016/01/22 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python快速排序算法实例分析
2017/11/29 Python
Python实现翻转数组功能示例
2018/01/12 Python
使用python制作一个解压缩软件
2019/11/13 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
升职自荐信
2013/11/28 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
安全协议书
2014/04/23 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
卖房授权委托书样本
2014/10/05 职场文书
党员自我评价范文2015
2015/03/03 职场文书
老乡聚会通知
2015/04/23 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL