當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。