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将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JS简单实现数组去重的方法分析
Oct 14 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
layer弹出层显示在top顶层的方法
Sep 11 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初学者头痛的十四个问题
2006/07/12 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
json 定义
2008/06/10 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python实现的概率分布运算操作示例
2017/08/14 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python如何从键盘获取输入实例
2020/06/18 Python
建筑实习自我鉴定
2013/10/18 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
学期个人工作总结
2015/02/13 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL