jQuery | .contents() 方法

简介

jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画等操作。其中 .contents() 方法用于获取匹配元素集合中每个元素的子节点，包括文本节点和注释节点，但不包括属性节点或根节点。

语法

$(selector).contents()

使用示例

假设有以下 HTML 结构：

<div id="container">
  Some text
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

我们可以使用以下 JavaScript 代码来获取 <div> 元素的子节点，并输出每个子节点的节点类型和文本内容：

var contents = $("#container").contents();
var output = "";

contents.each(function() {
  switch(this.nodeType) {
    case 1:
      // 当节点类型为元素节点时
      output += "Element Node: " + this.nodeName + "<br>";
      break;
    case 3:
      // 当节点类型为文本节点时
      output += "Text Node: " + this.nodeValue + "<br>";
      break;
    case 8:
      // 当节点类型为注释节点时
      output += "Comment Node: " + this.nodeValue + "<br>";
      break;
  }
});

$("#result").html(output);

上述代码中，$("#container").contents() 会返回 <div id="container"> 元素的内容节点。在 each() 方法中，我们遍历每个节点并根据其节点类型执行相应操作。最后，将输出结果放置到具有 id="result" 的元素中。

输出结果将如下所示：

Text Node: Some text
Element Node: P
Text Node: Paragraph 1
Element Node: P
Text Node: Paragraph 2

注意： .contents() 方法只能应用于包含在父元素内的元素，对于根节点将无效。

以上就是 jQuery 的 .contents() 方法的介绍和示例。希望对你有所帮助！