jQuery - DOM 操作

jQuery 提供了許多方法來高效地操作 DOM。您無需編寫冗長複雜的程式碼即可設定或獲取任何 HTML 元素的內容。

jQuery DOM 操作

jQuery 提供了諸如 attr()、html()、text() 和 val() 等方法，它們充當 getter 和 setter，用於操作 HTML 文件中的內容。

文件物件模型 (DOM) - 是 W3C（全球資訊網聯盟）標準，允許我們建立、更改或刪除 HTML 或 XML 文件中的元素。

以下是一些您可以使用 jQuery 標準庫方法在 DOM 元素上執行的基本操作：

提取元素的內容
更改元素的內容
在現有元素下新增子元素
在現有元素上方新增父元素
在現有元素之前或之後新增元素
用另一個元素替換現有元素
刪除現有元素
用元素包裝內容

在討論 jQuery 屬性時，我們已經介紹了 attr() 方法，本章將討論其餘的 DOM 內容操作方法 html()、text() 和 val()。

jQuery - 獲取內容

jQuery 提供了 html() 和 text() 方法來提取匹配的 HTML 元素的內容。以下是這兩種方法的語法：

$(selector).html();

$(selector).text();

jQuery 的 text() 方法返回內容的純文字值，而 html() 方法返回包含 HTML 標籤的內容。您需要使用 jQuery 選擇器來選擇目標元素。

示例

以下示例演示如何使用 jQuery 的 text() 和 html() 方法獲取內容：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         alert($("p").text());
      });
      $("#html").click(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p>
   
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

獲取表單欄位

jQuery 的 val() 方法用於從任何表單欄位獲取值。以下是此方法的簡單語法。

$(selector).val();

示例

以下是一個示例，演示如何使用 jQuery 的 val() 方法獲取 input 欄位的值：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert($("#name").val());
      });
      $("#b2").click(function(){
         alert($("#class").val());
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value="Zara Ali"/></p>
   <p>Class: <input type="text" id="class" value="Class 12th"/></p>
   
   <button id="b1">Get Name</button>
   <button id="b2">Get Class</button>
</body>
</html>

jQuery - 設定內容

jQuery 的 html() 和 text() 方法可用於設定匹配的 HTML 元素的內容。以下是這兩種方法在用於設定值時的語法：

$(selector).html(val, [function]);

$(selector).text(val, [function]);

這裡 val 是要為元素設定的 HTML 或文字內容。我們可以為這些方法提供一個可選的回撥函式，該函式將在元素的值設定時呼叫。

jQuery 的 text() 方法設定內容的純文字值，而 html() 方法設定包含 HTML 標籤的內容。

示例

以下示例演示如何使用 jQuery 的 text() 和 html() 方法設定元素的內容：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         $("p").text("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
      $("#html").click(function(){
         $("p").html("The quick <b>brown fox</b> jumps over the <b>lazy dog</b>");
      });
   });
</script>
</head>
<body>
   <p>Click on any of the two buttons to see the result</p>
   
   <button id="text">Set Text</button>
   <button id="html">Set HTML</button>
</body>
</html>

設定表單欄位

jQuery 的 val() 方法也用於設定任何表單欄位的值。以下是此方法在用於設定值時的簡單語法。

$(selector).val(val);

這裡 val 是要為輸入欄位設定的值。我們可以提供一個可選的回撥函式，該函式將在欄位的值設定時呼叫。

示例

以下是一個示例，演示如何使用 jQuery 的 val() 方法設定 input 欄位的值：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         $("#name").val("Zara Ali");
      });
      $("#b2").click(function(){
         $("#class").val("Class 12th");
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value=""/></p>
   <p>Class: <input type="text" id="class" value=""/></p>
   
   <button id="b1">Set Name</button>
   <button id="b2">Set Class</button>
</body>
</html>

jQuery - 替換元素

jQuery 的 replaceWith() 方法可用於將完整的 DOM 元素替換為另一個 HTML 或 DOM 元素。以下是此方法的語法：

$(selector).replaceWith(val);

這裡 val 是您想要用來代替原始元素的內容。這可以是 HTML 或簡單的文字。

示例

以下是一個示例，我們將用 <h1> 元素替換 <p> 元素，然後用 <h2> 元素替換 <h1> 元素。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         $("p").replaceWith("<h1>This is new heading</h1>");
      });
      $("#b2").click(function(){
         $("h1").replaceWith("<h2>This is another heading</h2>");
      });
   });
</script>
</head>
<body>
   <p>Click below button to replace me</p>

   
   <button id="b1">Replace Paragraph</button>
   <button id="b2">Replace Heading</button>
</body>
</html>

jQuery HTML/CSS 參考

您可以在以下頁面獲取操作 CSS 和 HTML 內容的所有 jQuery 方法的完整參考：jQuery CSS/HTML 參考。

列印頁面