contents()

获得匹配元素集合中每个元素的子元素，包括文字和注释节点。

.contents()

这个方法不接受任何参数

给定一个jQuery对象，表示一个DOM元素的集合，.contents()方法允许我们通过DOM树中查找集合中的直接子元素，并根据匹配的元素创建一个新的 jQuery 对象。.contents()和.children()方法类似，只不过前者包括文本节点和注释节点，以及jQuery对象中产生的HTML元素。请注意，虽然这种方式可以传递文本节点和注释节点给一个jQuery集合，但是大多数操作不会支持他们。少数几个支持的操作将在他们的API文档页面中有一个明确的说明。

如果iframe与主页同域，.contents()方法也可用于获取iframe中的文件内容。

从jQuery 3.2开始，还.contents()返回<template>元素的内容。

考虑一个简单<div>中一些文本节点，其中每个元素是相隔两换行符（<br />）：

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  <br /> <br />
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur.
</div>

我们可以使用.contents()方法将上述文本转换成三个格式良好的段落：

$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('<p></p>')
.end()
.filter('br')
  .remove();

此代码首先检索<div class="container">的内容，然后过滤它的文本节点，并且将它被包裹在段落标记内。这是通过测试元素的.nodeType属性。这个DOM属性保存一个数字代码，以显示节点的类型；文本节点使用代码3。再次过滤的内容，这次是<br />元素，这些元素都将被删除。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

例子

段落内找到所有的文本节点，并将他们包装了一个标记。

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
</head>
<body>
  <p>Hello <em">John</em>, how are you doing?</p>
<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>
 
</body>
</html>

Hello John, how are you doing?

改变背景颜色的iframe里面的链接。

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
</head>
<body>
  <iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe> 
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
 
</body>
</html>