博客

在jQuery中，代码执行的起始点是什么

  • Post category:jquery

在jQuery中，代码执行的起始点是文档加载完成后的ready事件。当文档加载完成后，jQuery会触发ready事件，这时候我们可以在事件处理程序中编写jQuery代码，对文档中的元素进行操作。

ready事件的基本语法

ready事件的基本语法如下：

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

在这个语法中，我们使用$(document)选择文档对象，并调用ready()方法。ready()方法接受一个函数作为参数，这个函数就是ready事件的事件处理程序。在这个函数中，我们可以编写jQuery代码，对文档中的元素进行操作。

示例1：在ready事件中操作元素

以下是一个示例，演示如何在ready事件中操作元素：

<!DOCTYPE html>
<html>
<head>
  <title>ready事件示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>这是一个落。</p>
  <script>
    $(document).ready(function() {
      $("p").addClass("highlight");
    });
  </script>
</body>
</html>

在这个示例中，我们在ready事件的事件处理程序中，使用$("p")选择所有的<p>元素，并使用addClass()方法将highlight类添加到这些元素上。当文档加载完成后，这些段落元素的背景颜色会变为黄色。

示例2：使用$(function(){})简化语法

在实际开发中，我们通常使用$(function(){})来简化ready事件的语法。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>ready事件示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
  <script>
    $(function() {
      $("p").addClass("highlight");
    });
  </script>
</body>
</html>

在这个示例中，我们使用$(function(){})来简化ready事件的语法。这个语法与$(document).ready(function(){})是等价的，都可以用来在文档加载完成后执行jQuery代码。

结论

在jQuery中，代码执行的起始点是文档加载完成后的ready事件。当文档加载完成后，jQuery会触发ready，这时候我们可以在事件处理程序中编写jQuery代码，对文档中的元素进行操作。我们可以使用$(document).ready(function(){})或$(function(){})来绑定ready事件的事件处理程序。需要注意的是，ready事件只会在文档加载完成后触发一次，因此我们应该将所有的jQuery代码都放在ready事件的事件处理程序中，以确保代码能够正确执行。

Tags: