jquery中的$(document).ready()方法和window.onload方法的区别

　　负责后台的同事反馈过来一个问题，他添加的一个js效果在我作的模板上出不了效果。我过去看了他添加的js，代码中有段window.onload方法，而模板中js也是用window.onload执行的，我猜测多是两个方法有冲突。通过测试确实是两者冲突，因而把其中一个改成$(document).ready()方法执行，因而问题解决。

　　可是对于window.onload和$(document).ready()两者的异同，一直不是很清楚，今天查资料认真看了下，把它记录在此。

　　window.onload和$(document).ready()主要有两点区别：

　　一、执行时机
　　window.onload方法是在网页中的全部的元素（包括元素的全部关联文件）都彻底加载到浏览器以后才执行。而经过jQuery中 的$(document).ready()方法注册的事件处理程序，只要在DOM彻底就绪时，就能够调用了，好比一张图片只要<img>标签 完成，不用等这个图片加载完成，就能够设置图片的宽高的属性或样式等。

　　——其实从两者的英文字母能够大概理解上面的话，onload即加载完成，ready即DOM准备就绪。

　　二、注册事件　

　　$(document).ready()方法能够屡次使用而注册不一样的事件处理程序，而window.onload一次只能保存对一个函数的引用，屡次绑定函数只会覆盖前面的函数。

　　例如：

　　先看window.onload方法在一个页面保存两次对函数的引用

function one(){
    alert("one");
}
function two(){
    alert("two");
}
window.onload = two ;
window.onload = one ;

　　运行代码后，弹出“one”，说明第一个函数的引用被第二个函数引用覆盖。

 

　　再看看$(document).ready()方法注册两个事件处理程序　　

function one(){
    alert("one");
}
function two(){
    alert("two");
}
$(document).ready(function(){
    one();
});
$(document).ready(function(){
    two();
});

　　运行代码，先弹出“one”，再弹出“two”，两个事件处理程序按顺序执行