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

最新推荐文章于 2024-08-15 11:39:27 发布

原创最新推荐文章于 2024-08-15 11:39:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #jquery #javascript #html #浏览器 #测试

jQuery相关专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了jQuery中的$(document).ready()与window.onload两种JavaScript事件处理方式之间的区别，包括执行时机、使用次数和简化写法等方面。

$(document).ready() 是jQuery响应javascript中的onload()事件并执行函数处理的快捷方式.虽然两个事件在执行效果有很大的相似性，但是两者在触发时间上有比较大的差异。

主要有以下几点区别：

1. 执行时机

window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。这种方式有一个很大的优点：不用考虑DOM元素加载的顺序。

jQuery中的$(document).ready()方法注册事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要<img alt="" />标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。这种方式优于onload()事件在于：$(document).ready()可以在页面没有完全下载时，操作页面的DOM元素。

2. 使用次数

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。

$(document).ready()可以同时编写多个，并且都可以得到执行。

3. 简化写法

window.onload没有简化写法。
$(document).ready(function(){}) 可以简写成 $(function(){});

测试代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>样例1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>

<script>
    window.onload = function() {
        alert ("window.onload -- 01");
    };

    window.onload = function() {
        alert ("window.onload -- 02");
    };

    $(function() {
        alert ("$(document).ready() -- 01");
    });

    $(function() {
        alert ("$(document).ready() -- 02");
    });

</script>

</body>
</html>

弹窗顺序是：

$(document).ready() -- 01
$(document).ready() -- 02
window.onload -- 02

解析：

1. $(document).ready()优先于window.onload执行；
2. $(document).ready()能执行多次，window.onload只能执行一次。