jQuery事件详解之$(document).ready()

在页面加载结束后,浏览器会通过js为dom元素添加事件。原生的js中使用window.onload方法;在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。

那么它和window.onload有何不同呢?

执行时机

window.onload是在网页中所有元素加上所有资源++完全加++载到浏览器后才执行。

而$(document).ready()中绑定的事件是在dom完全就绪时就可以被调用,此时对于jQuery来说都是可以被访问的(关联的资源可能并没有被加载完毕)。

举个例子来说,在$(document).ready()中定义了图片的宽高,但由于此时图片还没有被加载完毕,此时的宽高不会生效。要解决这个问题可以使用jQuery中的load()方法。

load()方法会在元素的onload事件中绑定一个处理函数,如果该处理函数绑定给window对象,则会在所有资源加载完毕后触发,如果load绑定在元素上则会在该元素加载完毕后触发。

//jQuery
$(window).load(function){

}
//等同于
window.onload=function(){

}

既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢?

多次执行

window.onload事件每次只能保存对一个函数的引用,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题,每次调用$document.ready()方法都会在现有行为上追加新的行为,这些行为会根据注册顺序依次执行。

function say(str){
    alert(str)
}
$(document).ready(function(){
    say('hello')
})
$(document).ready(function(){
    say('jQuery')
})
//依次弹出hello jQuery

简写方式

$(function(){
//是$(document).ready()的简写
})
//或者
$().ready(function(){
//当$()中不带参数时,默认为document
})

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    poetries阅读 13,156评论 17 491
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 425评论 0 2
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 3,884评论 1 104
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 296评论 0 1
  • 百战程序员_ Java1573题 QQ群:561832648489034603 掌握80%年薪20万掌握50%年薪...
    Albert陈凯阅读 12,593评论 2 32