如何在 jQuery 中的文档就绪事件上运行代码？

当编写网页时，我们希望浏览器可以在页面加载完毕后再执行我们的 JavaScript 代码。由于浏览器并不知道我们网页上所有的 JavaScript 代码应该何时执行，因此我们需要一种方法来告诉浏览器我们要在文档就绪之后才运行代码。在 jQuery 中，我们可以使用文档就绪事件来实现这个目的。

文档就绪事件

文档就绪事件是 jQuery 中的一个特殊事件，它会在网页上所有的 HTML 和 CSS 加载完成之后触发。文档就绪事件使用 jQuery 的 $(document).ready() 方法来注册，下面是它的基本语法：

$(document).ready(function() {
  // 在这里编写你的代码
});

或者可以使用它的简写形式：

$(function() {
  // 在这里编写你的代码
});

在文档就绪事件上运行代码

在使用文档就绪事件时，我们一般会把我们的 JavaScript 代码放在一个函数中作为参数传递给 $(document).ready() 方法，然后在这个函数中执行我们的代码。下面是一个例子：

$(document).ready(function() {
  // 在文档就绪事件上运行代码
  $("button").click(function() {
    $("p").toggle();
  });
});

代码执行时，当用户点击页面上的按钮时，所有的 <p> 元素都会切换它们的可见性。在这个例子中，$("button").click() 和 $("p").toggle() 方法都只有在文档就绪之后才会被执行。

我们也可以使用简写形式来编写上面的例子：

$(function() {
  // 在文档就绪事件上运行代码
  $("button").click(function() {
    $("p").toggle();
  });
});

结论

文档就绪事件是一个重要的事件，它可以保证我们的 JavaScript 代码在正确的时间点上执行，避免出现在元素未加载完成时运行代码导致的错误。在 jQuery 中，我们可以使用 $(document).ready() 方法来注册文档就绪事件，并在这个事件上执行我们的代码。