jQuery 选择并包装文本节点

在本文中，我们将介绍如何使用jQuery选择和包装文本节点。jQuery是一个流行的JavaScript库，广泛用于网页开发中。它提供了一套强大的选择器和操作方法，可以方便地操作HTML元素和文档。

什么是文本节点

在HTML文档中，文本节点是指没有标签的文本内容。例如，下面的代码中的 “Hello World” 就是一个文本节点：

<p>Hello World</p>

在jQuery中，可以使用选择器来选择文本节点并进行操作。

选择文本节点

jQuery提供了多种方法来选择文本节点。可以使用以下选择器来选择文本节点：

:contains()：选择包含指定文本内容的元素。
:empty：选择没有子节点或者只包含空白文本的元素。

例如，要选择包含 “Hello” 文本内容的所有元素，可以使用以下代码：

$(":contains('Hello')")

要选择没有子节点或者只包含空白文本的元素，可以使用以下代码：

$(":empty")

包装文本节点

一旦选中了文本节点，就可以使用wrap()方法来包装它们。wrap()方法可以在选择的元素外部添加一个父级元素。

例如，要将所有包含 “Hello” 文本内容的元素包装在一个 div 元素中，可以使用以下代码：

$(":contains('Hello')").wrap("<div></div>");

这将会修改HTML结构为：

<div>
  <p>Hello World</p>
  <span>Hello, jQuery!</span>
</div>

在选择器中，可以使用任何有效的HTML标记作为包装元素。

示例

以下是一个完整的示例，演示了如何选择和包装文本节点：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Select and Wrap TextNode</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
     $(document).ready(function() { // 选择包含 "Hello" 文本内容的元素并包装在一个 <div> 元素中$ (":contains('Hello')").wrap("<div></div>");
    });
  </script>
</head>
<body>
  <h1>Hello World</h1>
  <p>Hello, jQuery!</p>
  <span>Hi there!</span>
</body>
</html>

在上面的示例中，$(":contains('Hello')")选择了 h1 和 p 元素，将它们包装在一个 div 元素中。最终的结果如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Select and Wrap TextNode</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
     $(document).ready(function() { // 选择包含 "Hello" 文本内容的元素并包装在一个 <div> 元素中$ (":contains('Hello')").wrap("<div></div>");
    });
  </script>
</head>
<body>
  <div>
    <h1>Hello World</h1>
    <p>Hello, jQuery!</p>
  </div>
  <span>Hi there!</span>
</body>
</html>