$(document).ready()方法和window.onload有什么区别?

        1.触发时间点:$(document).ready() 方法在 DOM 树构建完毕,并且所有的 DOM 元素都可以操作时触发,不需要等待所有的资源(如图片)都加载完成。而 window.onload 事件是在所有的资源都加载完成后触发。

        2.执行顺序:$(document).ready() 方法可以多次调用,它们会按照调用的顺序依次执行。而 window.onload 事件只能被绑定一次,如果多次调用,只有最后一个绑定的事件会执行。

        3.页面加载状态:$(document).ready() 方法在页面的加载过程中就会触发,即使页面的其他资源还没有加载完成。而 window.onload 事件只有在页面的所有资源都加载完成后才会触发。

        4.使用方式:$(document).ready() 方法是 jQuery 提供的,需要引入 jQuery 库,并使用 jQuery 的语法来调用。而 window.onload 是 JavaScript 原生提供的事件,可以直接在 JavaScript 中使用。

        综上所述,$(document).ready() 方法更适用于在 DOM 准备完毕后执行一些操作,比如修改 DOM 结构、绑定事件等。而 window.onload 事件适用于在页面所有资源加载完成后执行一些需要依赖所有资源的操作,比如操作图片、视频等。

        以下是一串代码示例来区分 $(document).ready() 方法和 window.onload 事件:

// 使用 $(document).ready() 方法
$(document).ready(function() {
  // 在 DOM 准备完毕后执行的操作
  console.log("DOM is ready");
});

// 使用 window.onload 事件
window.onload = function() {
  // 在页面所有资源加载完成后执行的操作
  console.log("All resources are loaded");
};

在这个示例中,当页面加载时,首先会触发 $(document).ready() 方法,然后在所有资源加载完成后会触发 window.onload 事件。你可以在控制台中查看两个不同的日志输出。

需要注意的是,如果使用了 jQuery 库,并且使用了 $(document).ready() 方法,那么可以简写为:

$(function() {
  // 在 DOM 准备完毕后执行的操作
  console.log("DOM is ready");
});

这种简写方式与 $(document).ready() 的效果是一样的。

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值