jquery的ready与原生onload的区别

window.onload=function(){
    console.log(111)
}

window.onload=function(){
    console.log(222)
}

$(document).ready(function(){
    console.log(333)
})

$(document).ready(function(){
    console.log(444)
})
//33,44,22

区别点:

一:dom级事件不同
window.onload:属于dom0级事件的方式实现,dom0级事件不能同时绑定多个相同的事件,比如onclick,onload等；会被覆盖，只执行最后一个的函数;所以这里console.log(111)才没出现
而$(document).ready jquery源码里使用的是document.addEventListener( “DOMContentLoaded”, completed );
addEventListener属于dom2级事件,所以 则不会被替换掉,原因是因为dom2级事件可以绑定多次

所以如果想使用onload,可以使用addEventListener

window.addEventListener('load',function(){
    console.log(555)
})

二:执行顺序的不同
$(document).ready的DOMContentLoaded，表示文档结构加载完成（不包含图片等非文字媒体文件）就触发;
举例:img 这个dom元素加载出來即可
onload，指示页面包含图片等文件在内的所有元素都加载完成。
举例:img 要等到src加载出來才行

<img src=''  alt=''/>