jQuery中ready方法的作用及用法详解

2024-03-03 10:54:15 前端笔记 95

在网页开发中，我们经常会使用jQuery来简化JavaScript代码的编写，其中一个非常常用的方法就是ready方法。这篇文章将详细介绍jQuery中ready方法的作用及用法，并通过具体的代码示例进行解释。

一、ready方法的作用：

在jQuery中，ready方法用来确保文档加载完毕后再执行相应的操作。通常情况下，我们会将需要在页面加载完成后执行的代码放在ready方法内部。

二、ready方法的用法：

ready方法有多种用法，以下是几种常见的方式示例：

$(document).ready(function(){
   // 在文档加载完毕后执行的代码
});

简化写法：

$(function(){
   // 在文档加载完毕后执行的代码
});

这两种写法都是等价的，都表示在文档加载完成后执行后面的代码。

使用箭头函数：

$(() => {
   // 在文档加载完毕后执行的代码
});

通过箭头函数的写法也可以简洁地实现ready方法的功能。

使用ES6的写法：

$(() => {
   // 在文档加载完毕后执行的代码
});

三、代码示例：

接下来，我们通过一个具体的示例来演示ready方法的用法。假设我们需要在页面加载完成后修改页面某个元素的文字内容，代码如下：

<!DOCTYPE html>
<html>
<head>
   <title>jQuery Ready方法示例</title>
   <script src="code.jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
   <div id="content">原始内容</div>
   
   <script>
      $(function(){
          $("#content").text("修改后的内容");
      });
   </script>
</body>
</html>

在上面的代码中，我们使用了$()的简化写法来执行一个匿名函数，在这个函数中，我们通过jQuery选择器选取id为content的元素，并使用text方法将其内容修改为”修改后的内容”。由于这段代码被包裹在ready方法内部，所以只有在页面加载完成后才会执行，确保了代码的正确性。