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

$(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

猜你喜欢

转载自www.cnblogs.com/449house/p/11925549.html