jQuery中的 $(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高Web应用程序的响应速度,jQuery就是用 $(document).ready()方法来代替传统的JS的window.onload方法的。
下面利用对比的方式,可以加深对$(document).ready()的理解。
1、执行时机
JS(window.onload):网页中所有的元素(包括元素的所有关联文件)完全加载后才运行。
jQuery($(document).ready()):DOM加载完毕后即可被调用,这不意味这关联文件已经加载完毕(如图片)
JS的代码如下:
window.onload = function(){
//编写代码
}
jQuery的代码如下:
$(document).ready(function(){
//编写代码
})
注意:在使用$(document).ready()的过程中,可能会出现已经将HTML解析为DOM树了,可是图片等相关文件还没有加载完毕,解决这个问题,可以使用jQuery的load()方法:代码如下所示:
$(window).load(function(){
//编写代码
})
2、多次使用问题
JS(window.onload):每一个onload只能保存对一个函数的引用,它会自动用后面的函数去覆盖前面的函数
jQuery( $(document).ready()):函数会按照注册(绑定)的顺序一次执行
3.简写方式$(document).ready(function(){}):
1)
$(function(){
//编写代码
})
2)
$().ready(function(){
//编写代码
})