jQuery的页面加载事件

最新推荐文章于 2022-06-04 12:47:25 发布

weixin_34405354

最新推荐文章于 2022-06-04 12:47:25 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/efanfan/archive/2013/01/24/2874369.html

本文探讨了window.onload事件的特点及限制，即同一页面中只能存在一个有效的window.onload事件。同时介绍了jQuery提供的页面加载事件处理方式，允许在同一个页面中定义多个加载事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　window.onload=function(){...}作用是当页面加载的时候可以调用某些函数，例如：

window.onload = function() {
    alert("加载成功");
}

Firefox显示结果

但是这个时间只能有一个，例如：

window.onload = function() {
    console.log("window.onload fn1");
}
window.onload = function() {
    console.log("window.onload fn2");
}

在FireBug中显示结果为：

可以清楚的看到只打印了第二句，但是上面的方法的却是运行到了

所以得出的结论是window.onload事件只能有一个，如果有多个，则值运行最下面的那一个。

但是在.net中经常需要在后台加载JS，如果碰到这种情况岂不死翘翘了？

jQuery很好的解决了这个问题，jQuery也有一个页面加载事件，例如：

jQuery(function() {    //或者$(function(){...});

    console.log("jQuery fn1");

});

/比较老的写法
$(document).ready(function() {

    console.log("$ fn2");

});

来看看以下代码的运行效果：

jQuery(function() {
    
    console.log("jQuery fn1");
    
});

jQuery(function() {

    console.log("jQuery fn2");

});

具体区别还在研究当中，让我们来看看几种方法的整体效果：

View Code

jQuery(function() {

    console.log("jQuery fn1");

});

jQuery(function() {

    console.log("jQuery fn2");

});

$(document).ready(function() {

 console.log("$ fn2");

});

$(document).ready(function() {

    console.log("$ fn1");

});

window.onload = function() {

    console.log("window.onload fn1");

}
window.onload = function() {

    console.log("window.onload fn2");

}