window.onload=function(){}与$(function(){})的区别

浏览器页面文档加载完以后,会通过javascript为DOM元素添加事件,通常使用js方式有

window.onload=function(){}与document.onready=function(){},对应的,jquery方式使用$(window).load(function(){}) 与 $(document).ready(function(){})【简写:$().ready(function(){})或$(function(){})】;

注意点:

a、js方式不能同时编写多个,只会执行其中一个,而jquery方式可以编写多个,都可执行,不冲突

b、不管是js还是jquery,load方式必须等待页面所有内容加载完毕后(包括图片)才能执行,而ready方式则当页面dom结构绘制完毕后就执行,不必等待dom元素关联的内容加载完成

例如在ready中,获取图片的高度和宽度不一定能获取到,因为此时只加载了与图片相关的html,其图可能还没加载完成

(用chrome测试发现) 与load方法相关的只能用window对象不能用document对象,ready方法则js方式只能用document对象, jquery方式既可以用document对象也可以用window对象

window.onload=function(){
    console.log(1);
};
window.onload=function(){
    console.log(2);
};
//输出2
document.onready = function() {
     console.log(1);

};
document.onready = function() {
      console.log(2);
};
//输出2
$(window).load(function(){
    console.log(1);
});
$(window).load(function(){
    console.log(2);
});
//输出1,2

 

  

 

posted @ 2018-01-16 15:26  Mary哎呀小龙  阅读(260)  评论(0编辑  收藏  举报