$(document).ready()和window.onload的区别

Posted 2020-11-22 449house

$(document).ready()和window.onload的区别

$(document).ready()和window.onload都是文档就绪的方法,当页面加载后执行参数中的函数。

前者为jQuery方法，后者为javascript方法。它们之间一共有三种区别：

区别1：简写和不可简写

jQuery中$(document).ready()可以简写为$()。

//$(document).ready() 可以缩写为$()
$(function(){
    alert("111");
})

原生js中window.onload不可简写。

//无法缩写
window.onload = function(){
    alert("111");
}

区别2：个数的区别

在jQuery中 .ready()方法可以写多个。

$(function(){
    console.log("语句1");
})
            $(function(){
    console.log("语句2");
})

在控制台输出语句。两个都输出。

 

 

window.onload只能写一个。

window.onload = function(){
    console.log("语句1");    //被覆盖了 只输出了语句2
};
window.onload = function(){
    console.log("语句2");
};

代码自上而下运行 只输出了一条

 

 

 区别3：执行时机不一样

.ready()方法是网页中所有DOM文档结构回执完毕后即刻执行，可能与DOM元素关联的内容（图片，flash，视频等）并没有加载完就执行。

window.onload是必须等待网页中所有内容加载完毕后(包括图片，flash，视屏等才能执行)。

下面这个比较好像不是很严谨 无法用代码量来做区别 只能在它们之间做一下对比

window.onload = function(){
    alert("页面所有元素加载完成");
}
$(function(){
    alert("页面DOM结构加载完成");   
})

jQuery的.ready()方法先出来， 更早执行 提前把界面的效果实现

window.onload的方法后弹出

 

以上就是JavaScript和jQuery就绪方法的区别

如有错误请指正:D