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.com/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.com/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.com/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.com/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.com/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 参考。

打印页面