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方法內部，所以只有在頁面加載完成后才會執行，確保了代碼的正確性。