.contents()
.contents()
描述：获得匹配的元素集合中每个元素的子元素，包括文本节点和注释节点。
该方法不接受任何参数。
给定一个jQuery对象，它代表了一个DOM元素的集合，.contents()方法允许我们搜索遍DOM树中这些元素的紧挨着的子元素，并从匹配的元素构造一个新的jQuery对象。The .contents() and .children() methods are similar, except that the former includes text nodes and comment nodes as well as HTML elements in the resulting jQuery object. Please note that most jQuery operations don't support text nodes and comment nodes. The few that do will have an explicit note on their API documentation page.
The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.
设想一个简单的<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 />元素，并删除了那些元素。
示例
在一个段落文本中查找所有的文本节点，并用加粗标签包裹它。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.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></b>" );
</script>
</body>
</html>
演示结果
改变一个iframe内中的链接的背景颜色。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>contents demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe> <script> $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" ); </script> </body> </html>
演示结果