jQuery - 多个 $(document).ready ...

JS

使用 jQuery 的 $(document).ready() 函数，可以确保在文档加载完毕后执行相应的代码。通常情况下，我们只需在页面中添加一个 $(document).ready() 函数，但有时我们可能需要在不同的代码块中执行不同的操作。那么，如何在一个页面中使用多个 $(document).ready() 函数呢？

首先，让我们来看一个简单的示例代码。假设我们有一个页面，其中包含两个部分：一个用于显示当前时间，另一个用于显示当前日期。我们希望在页面加载完毕后，分别更新这两个部分的内容。

html
<!DOCTYPE html>
<html>
<head>
  <title>多个 $(document).ready()</title>
  <script src="https://cdn.JSdelivr.net/jquery/3.6.0/jquery.min.JS"></script>
</head>
<body>
  <div id="time"></div>
  <div id="date"></div>
  <script>
    // 第一个 $(document).ready() 函数
    $(document).ready(function() {
      var currentTime = new Date().toLocaleTimeString();
      $('#time').text('当前时间：' + currentTime);
    });
    // 第二个 $(document).ready() 函数
    $(document).ready(function() {
      var currentDate = new Date().toLocaleDateString();
      $('#date').text('当前日期：' + currentDate);
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了两个 $(document).ready() 函数。第一个函数用于更新 id 为 "time" 的 div 元素的内容，显示当前时间；第二个函数用于更新 id 为 "date" 的 div 元素的内容，显示当前日期。

在页面加载完毕后，两个函数会按顺序执行。首先，第一个函数会获取当前时间并更新对应的 div 元素；然后，第二个函数会获取当前日期并更新对应的 div 元素。这样，页面就会显示出当前的时间和日期。

多个 $(document).ready() 函数的好处

在某些情况下，我们可能需要在页面加载完毕后执行多个不相关的操作。使用多个 $(document).ready() 函数可以帮助我们更好地组织代码，使其更具可读性和可维护性。

在本文中，我们介绍了如何在一个页面中使用多个 $(document).ready() 函数。通过示例代码，我们展示了如何使用两个 $(document).ready() 函数来更新页面中的不同部分。同时，我们也探讨了多个 $(document).ready() 函数的好处，以及如何利用它们来组织代码。

希望本文对你理解和使用多个 $(document).ready() 函数有所帮助！