jquery中$(document).ready的使用

浏览器通常会通过JavaScript为DOM元素添加事件,在常规的JavaScript代码中,会使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。在使用过程中,需要注意二者之间的细微区别。

1.执行时机

window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任何元素。而$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用,此时,网页的所有元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素的关联文件都已经下载完毕。如果需要实现与window.onload同样的效果,jQuery中提供了专门的方法——load。

2.多次使用

window.onload方法只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数,因此不能在现有的行为上添加新的行为。也就是说,需要把所有需要执行的代码放在一个方法中,并交给window.onload方法去执行。这就有局限性了,比如多个javascript文件都需要用到window.onload方法时。而jquery的$(document).ready()方法能够很好地处理上述情况,每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为会根据注册的顺序依次执行。

3.简写方式

$(document).ready(function(){

//编写代码

})可以简写为:

$(function(){

//编写代码

})

另外,$(document)也可以简写为$()。当$()不带参数时,默认参数是“document”,因此也可以简写为:

$().ready(function(){

//编写代码

})

4.实例代码:

window.onload

执行效果:

$(document).ready

执行效果:


以上即为window.onload和$(document).ready的区别,需要在实际的使用中仔细体会。

举报
评论 0