jQuery DOM操作

jQuery提供了许多高效地操作DOM的方法。您不需要编写复杂的代码来设置或获取任何HTML元素的内容。

jQuery DOM操作

jQuery提供了一些方法，例如 attr() 、 html() 、 text() 和 val() ，它们充当了HTML文档中内容的获取器和设置器。

文档对象模型（DOM） – 是W3C（万维网联盟）的标准，允许我们创建、更改或删除HTML或XML文档中的元素。

以下是您可以使用jQuery标准库方法在DOM元素上执行的一些基本操作：

提取元素的内容
更改元素的内容
在现有元素下添加子元素
在现有元素上添加父元素
在现有元素之前或之后添加元素
用另一个元素替换现有元素
删除现有元素
在元素内部包装内容

我们已经介绍了 attr() 方法，同时讨论了 jQuery属性，本章将讨论其他DOM内容操作方法 html() 、 text() 和 val() 。

jQuery – 获取内容

jQuery提供了 html() 和 text() 方法来提取匹配的HTML元素的内容。以下是这两种方法的语法：

$(selector).html();
$(selector).text();

text() 方法返回内容的纯文本值，而 html() 方法返回带有HTML标签的内容。您需要使用jQuery选择器来选择目标元素。

示例

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

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.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">获取文本</button>
   <button id="html">获取HTML</button>
</body>
</html>

获取表单字段

jQuery的 val() 方法用于从任何表单字段中获取值。以下是该方法的简单语法。

$(selector).val();

示例

以下是另一个示例，展示如何使用jQuery方法 val() 获取输入字段的值。

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.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>姓名：<input type="text" id="name" value="Zara Ali"/></p>
   <p>班级：<input type="text" id="class" value="Class 12th"/></p>

   <button id="b1">获取姓名</button>
   <button id="b2">获取班级</button>
</body>
</html>

jQuery – 设置内容

jQuery html() 和 text() 方法可用于设置匹配的HTML元素的内容。在使用这两个方法设置值时，以下是它们的语法：

$(selector).html(值, [函数]);
$(selector).text(值, [函数]);

这里的值是要为元素设置的HTML或文本内容。我们可以为这些方法提供可选的回调函数，当元素的值被设置时调用该函数。

jQuery text() 方法设置纯文本内容的值，而 html() 方法设置带有HTML标签的内容。

示例

以下示例演示如何使用jQuery的 text()

和 html() 方法：

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.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>点击任意两个按钮即可查看结果</p>

   <button id="text">设置文本</button>
   <button id="html">设置HTML</button>
</body>
</html>

设置表单字段

jQuery val() 方法还可用于设置任何表单字段的值。以下是当使用该方法设置值时的简单语法。

$(selector).val(val);

这里的 val 是要为输入字段设置的值。我们可以提供一个可选的回调函数，当字段的值被设置时将被调用。

示例

下面是另一个示例，展示如何使用 jQuery 方法 val() 设置字段的值：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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">设置姓名</button>
   <button id="b2">设置班级</button>
</body>
</html>

jQuery – 替换元素

jQuery的 replaceWith() 方法可用于将一个完整的DOM元素替换为另一个HTML或DOM元素。方法的语法如下：

$(selector).replaceWith(值);

这里的值是你想要用来替换原始元素的内容。可以是HTML或纯文本。

示例

下面是一个示例，我们将用<h1>元素替换<p>元素，然后进一步用<h2>元素替换<h1>元素。

<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function() {$ ("#b1").click(function(){
          $("p").replaceWith("<h1>这是新标题</h1>"); });$ ("#b2").click(function(){
         $("h1").replaceWith("<h2>这是另一个标题</h2>");
      });
   });
</script>
</head>
<body>
   <p>点击下面的按钮来替换我</p>


   <button id="b1">替换段落</button>
   <button id="b2">替换标题</button>
</body>
</html>