这两个函数的差别就在于调用的时机不同，一般情况一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。在日常开发中我们经常需要获取页面的元素进行操作，而在编写代码的时候为了代码易读性我们会将js代码放在一起引入页面中，这就导致js引擎编译代码时可能会出现一些错误，如方法、变量未定义等，这是因为当操作页面DOM元素的js代码执行时，页面中相应的DOM元素还没有渲染，所以会出错。
$(document).ready(function() {
// DOM元素加载之后做的事情
})
此方法会在DOM元素全部加载完成之后，图片等其他信息加载之前调用，此时便可以肆无忌惮的调用页面DOM元素。JQuery方法的默认参数是document，所以$(docuemnt).ready(function() { ... })就等价于 $().ready(function() { ... })，
简写：$(function() { // 操作元素的代码 })
$(function () {
// 此方法为jQuery DOM加载完成触发的事件
})
原生js，DOM加载完成执行的事件为DOMContentLoaded，不过此方法只能通过 DOM2 级方式添加，即采用addEventListener()/attachEvent() 方式添加才能够使用。
document.addEventListener('DOMContentLoaded', function() {
// 此方法为原生js DOM加载完成执行的事件
});
jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件
window.onload方法会在页面及所有图片加载完毕触发，window.onload = function() { }。
window.onload=function(){
// 此方法会在DOM加载完成事件之后 执行
}
//或者可以具体到某一个具体的DOM元素
document.getElementById("imgID").onload=function(){
//do something
}
此时可以访问页面中的所有元素，当js文件引入写在body上面的时候，页面自上向下执行，js中的代码操作页面元素的时候，页面还没有渲染完成，所以无法获取页面元素，而window.onload方法执行时页面所有的元素都已经渲染完毕，所以就不会出现问题。
还有一个方法会在DOM元素加载完成之前调用
(function () {
// 此方法会在DOM加载完成之前调用
网友评论