如何使用 jQuery 选择文本节点？

在 Web 开发中，操作文本节点是非常常见的操作。而 jQuery 作为一款非常流行的 JavaScript 库，提供了多种方法来选择和操作文本节点。

选择文本节点

要选择文本节点，我们需要使用 jQuery 中的选择器。在 jQuery 中，通用选择器 * 可用于选择所有 HTML 元素，包括文本节点。

选择所有文本节点

$('*:not(iframe):not(script)').contents().filter(function() {
  return this.nodeType === 3;
}).each(function() {
  console.log($(this).text());
});

以上代码可以选择当前页面中所有的文本节点，并将其输出到 console 中。

但是，不建议在实际开发中使用此方法，因为选择所有文本节点的性能开销可能很大。

选择特定元素内的文本节点

我们也可以使用特定元素的选择器来选择该元素内的所有文本节点。例如，如果要选择 <div id="content"></div> 中的所有文本节点，可以使用以下代码：

$('#content').contents().filter(function() {
  return this.nodeType === 3;
}).each(function() {
  console.log($(this).text());
});

此代码将选择 div 元素中的所有文本节点，并将其输出到 console 中。

操作文本节点

获取节点文本

我们可以使用 jQuery 中的 text 方法来获取节点的文本。例如：

<div id="content">Hello World!</div>

<script>
var text = $('#content').text();
console.log(text); // "Hello World!"
</script>

设置节点文本

我们可以使用 jQuery 中的 text 方法来设置节点的文本。例如：

<div id="content"></div>

<script>
$('#content').text('Hello World!');
</script>

此代码将设置 div 元素的文本内容为 "Hello World!"。

总结

通过使用 jQuery 中的选择器和文本操作方法，我们可以轻松选择和操作文本节点。但是要注意，选择所有文本节点的性能开销可能很大，因此在实际开发中应该谨慎使用。