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

jQuery的 $(document).ready() 与window.onload的区别是前者在DOM结构渲染完毕后就会执行，后者则需要等待页面上所有的资源（如图片、js文件等）完全加载后才会执行。下面详细介绍它们的区别和使用方法。

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

$(document).ready()

$(document).ready()是jQuery的一个事件，用于在DOM结构渲染完毕后就会被触发。它的语法结构如下：

$(document).ready(function(){
    // code to be executed
});

这里的 "code to be executed" 是在DOM结构渲染完毕后需要执行的代码。$(document).ready() 可以被简写为 $(function(){ })，这是因为它是最常用的 jQuery 事件之一。

下面是一个示例说明 $（document）.ready() 的用法：

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

这个例子中，当点击 p 标签时，就会隐藏它自己。

window.onload

window.onload 是JavaScript中的一个全局事件，表示当页面上所有资源（包括图片、js文件等）都加载完成后才会被触发。它的语法结构如下：

window.onload = function(){
    // code to be executed
};

这里的 "code to be executed" 是在所有资源都加载完成后需要执行的代码。

下面是一个示例说明 window.onload 的用法：

window.onload = function(){
    var img = document.getElementById("my-image");
    img.src = "image.jpg";
};

这个例子中，当所有资源都加载完成后，会将 id 为 my-image 的图片的地址改为 image.jpg。

$(document).ready() 与 window.onload 的使用场景

可以看到 $(document).ready()和window.onload两者非常的不同，一个只需要DOM结构渲染完毕就能执行，另一个则需要等待页面上所有资源都加载完成才能执行。因此，具体使用哪个会根据具体情况而定。

• 如果只需要在DOM结构生成后就能执行某些特定的脚本，则可以使用 $(document).ready()。
• 如果需要在所有页面资源加载完成后才能执行某些脚本操作，例如操作某个图片的宽度、高度等属性，则应使用 window.onload。

下面是一个例子：假设有一张图片需要在网页加载完毕后再加载，那么代码如下：

window.onload = function(){
    var img = document.getElementById("my-image");
    img.src = "image.jpg";
};

如果不使用window.onload，则这个图片有可能在 DOM 结构渲染完毕后立即展示，而图片实际上还没有下载完成，会导致用户看到一张空白的图片。如果需要避免这种情况则应使用window.onload事件。

总结

$(document).ready() 和 window.onload 都是在网页中常见的一些事件。根据具体需求可以使用其中一个或两个同时使用。总之，了解它们之间的区别，可以帮助我们更好的掌握如何使用它们。