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

最新推荐文章于 2021-12-30 10:30:57 发布

flyter

最新推荐文章于 2021-12-30 10:30:57 发布

阅读量1.1k

点赞数

分类专栏： jQuery相关文章标签： function jquery javascript html 浏览器测试

本文链接：https://blog.csdn.net/flyter/article/details/7480912

版权

jQuery相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

$(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只能执行一次。

flyter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window.onload与$(document).ready()的区别

$(document).ready() 是jQuery响应javascript中的onload()事件并执行函数处理的快捷方式.虽然两个事件在执行效果有很大的相似性，但是两者在触发时间上有比较大的差异。主要有以下几点区别：1. 执行时机window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。这种方式有一个很大的优点：不用考虑DOM元素
复制链接

扫一扫