当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .contents()用法及代码示例


用法 
.contents() => jQuery

说明：获取匹配元素集中每个元素的子元素，包括文本和注释节点。

  • 添加的版本：1.2.contents()

    • 此方法不接受任何参数。

给定一个表示一组 DOM 元素的 jQuery 对象，.contents() 方法允许我们在 DOM 树中搜索这些元素的直接子元素，并从匹配的元素构造一个新的 jQuery 对象。 .contents() 和.children() 方法相似，只是前者在生成的 jQuery 对象中包括文本节点和注释节点以及 HTML 元素。请注意，大多数 jQuery 操作不支持文本节点和注释节点。少数这样做的人会在他们的 API 文档页面上有明确的说明。

.contents() 方法也可用于获取 iframe 的内容文档，如果 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 />元素，并且这些元素被删除。

例子：

查找段落内的所有文本节点并用粗体标记将它们包起来。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello <a href="https://johnresig.com/">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-3.5.0.js"></script>
</head>
<body>
 
<iframe src="https://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
 
<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
 
</body>
</html>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .contents()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。