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()
的效果是一样的。