返回值:jQuerycontents()

取得匹配元素中的每个元素的子元素,包括文本和注释节点。

若一个 jQuery 对象代表了一个 DOM 元素集合,.contents() 方法允许我们在 DOM 树中查找集合中的直接子元素,并根据匹配的元素创建一个新的 jQuery 对象。.contents().children() 方法很类似,只不过是在最终的 jQuery 对象中,前者还包括了文本节点和 HTML 元素。

如果 iframe 和页面在相同的域中,那么 .contents() 方法可以用于获取 iframe 的内容。

例如,有如下一个简单的 <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。通过 .end() 方法再次选出 div 的内容,然后再过滤出 <br /> 元素,并移除该元素。

示例:

查找段落中的所有文本节点,并为它们加上 bold 标签。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

<script>

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

</script>
</body>
</html>

演示:

示例:

改变 iframe 中链接的背景色。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.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>

演示: