$(document).ready

$(document).ready() 是一个由 jQuery 库提供的函数，用于 在 DOM 加载完成后执行 JavaScript 代码 。它的主要作用是确保在文档完全加载后再执行代码，以便能够正确地操作页面元素。当页面的 DOM 加载完毕后，该函数将被调用并执行其中的代码。

使用 $(document).ready() 的基本语法如下：

$(document).ready(function() {
    // 执行代码
})；

也可以使用简写形式：

$(function() {
    // 执行代码
})；

这两种写法的效果是完全一样的，只是简化了语法。

使用场景

在开发 Web 应用时，我们经常需要在页面加载完成后执行一些 JavaScript 操作，例如操作 DOM、绑定事件处理函数等。使用 $(document).ready() 可以确保这些操作在 DOM 完全加载后进行，从而避免因 DOM 未完全加载而导致的错误。

与 window.onload 的区别

window.onload 事件会在文档完全下载到浏览器中时触发，包括所有资源(如图片)都加载完毕。这意味着页面上的所有元素对 JavaScript 而言都是可访问的。因此，window.onload 适用于编写功能性强的代码，但可能会导致页面加载延迟。

相比之下，$(document).ready() 只需要 DOM 完全加载并可用时即可执行，不需要等待所有资源加载完毕。因此，$(document).ready() 的执行速度通常比 window.onload 快。

示例代码

以下是一个使用 $(document).ready() 的示例，展示了如何在页面加载完成后修改 DOM 元素的内容和样式，以及绑定事件处理函数：

$(document).ready(function() {
    // 修改元素的文本内容
    $("#my-element").text("Hello, world!")；

    // 添加 CSS 样式
    $("#my-element").css("color", "red")；

    // 绑定事件处理函数
    $("#my-button").click(function() {
        alert("Button clicked!")；
    })；
})；

通过使用 $(document).ready()，可以确保在页面加载完成后立即执行这些操作，从而提高代码的可靠性和性能。

Top
×
×