JavaScript-jQuery的ready和原生js的onload

最新推荐文章于 2025-06-01 19:58:48 发布

fogy丶

最新推荐文章于 2025-06-01 19:58:48 发布

阅读量404

点赞数 1

分类专栏：前端知识文章标签： JavaScript jQuery

本文链接：https://blog.youkuaiyun.com/weixin_44325444/article/details/103227332

版权

前端知识专栏收录该内容

3 篇文章

订阅专栏

jQuery的ready和原生js的onload

两者出现的原因：加载模式
两者的区别
window.onload的缺点
总结
jQuery 经典面试题

两者出现的原因：加载模式

jQuery-demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的加载模式</title>
    <script type="text/javascript" src="../jquery-1.12.4.js"></script>
    <script type="text/javascript" src="02jQuery-demo.js"></script>

</head>
<body>
<div id="box">jQuery基础核心</div>
</body>
</html>

02jQuery-demo.js

$('#box').css('color','red');

思考：这段代码执行后有什么效果呢？

答：没有效果。
页面从上往下顺序加载，当加载JS的jQuery代码时，id为box的div元素还没有加载到页面上，所以不会找到jQuery对象，导致字体没有变红。

执行结果：
在这里插入图片描述

因此在延迟等待加载，JavaScript提供了一个时间onload,jQuery提供了ready,方法如下:
window.onlad = function(){};                      //JavaScript等待加载
$(document).ready(function(){});                  //jQuery等待加载

两者的区别

window.onload：所有元素加载完毕才会执行，无需考虑加载的次序

当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。

$(document).ready{ }：HMTL下载完成并解析为DOM树之后，代码就会执行

会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行。

ready方法可以有多个，而onload只能是一个，多了的话也只是按最后写的一个来加载。

如下面的代码，最后的输出顺序为，ready -> ready2 -> onload

$(document).ready(function() {
    alert("ready");
})
 
window.onload = function() {
    alert("onload");
}
 
$(document).ready(function() {
    alert("ready2");
})

在这里插入图片描述

window.onload的缺点

在实际应用中，很少使用window.onload，原因：

需要等待图片等大型元素加载完毕后才能执行JS代码。若网速较慢时，
页面上的 JS 交互功能（如下拉菜单、超链接）全部处在假死状态。
只能执行单次在多次开发和团队开发中会带来困难。

总结

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。不过有些时候，必须要等所有的元素都加载完毕，才可以执行一些方法的时候用
$(window).load(function() {})等同于window.onload

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个，最后一个。
$(document).ready()可以同时编写多个，并且都可以得到执行

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

4：注意的是jq想在所有dom加载之前执行代码

(function() {

     alert("DOM还没加载哦!");

})(jQuery)

jQuery 经典面试题

$(document).ready() 是个什么函数？为什么要用它？
JavaScript window.onload 事件和 jQuery ready()函数有何不同？

持续更新中…