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

JQuery .add()用法及代碼示例


用法 
.add( selector ) => jQuery

說明：創建一個新的 jQuery 對象，並將元素添加到匹配的元素集中。

  • 添加的版本：1.0.add( selector )

    • selector
      類型：Selector
      表示選擇器表達式的字符串，用於查找要添加到匹配元素集中的其他元素。

  • 添加的版本：1.0.add( elements )

    • elements
      類型：Element
      要添加到匹配元素集合中的一個或多個元素。

  • 添加的版本：1.0.add( html )

    • html
      類型：htmlString
      要添加到匹配元素集的 HTML 片段。

  • 添加的版本：1.3.2.add( selection )

    • selection
      類型：jQuery
      要添加到匹配元素集的現有 jQuery 對象。

  • 添加的版本：1.4.add( selector, context )

    • selector
      類型：Selector
      表示選擇器表達式的字符串，用於查找要添加到匹配元素集中的其他元素。
    • context
      類型：Element
      文檔中選擇器應該開始匹配的點；類似於 $(selector, context) 方法的上下文參數。

給定一個表示一組 DOM 元素的 jQuery 對象，.add() 方法從這些元素和傳遞給方法的元素的聯合構造一個新的 jQuery 對象。 .add() 的參數幾乎可以是 $() 接受的任何內容，包括 jQuery 選擇器表達式、對 DOM 元素的引用或 HTML 片段。

不要假定此方法按照元素傳遞給.add() 方法的順序將元素附加到現有集合。當所有元素都是同一個文檔的成員時，來自.add() 的結果集合將按文檔順序排序；也就是說，按照每個元素在文檔中出現的順序。如果集合由來自不同文檔或不在任何文檔中的元素組成，則排序順序未定義。要創建具有明確定義順序的元素且沒有排序開銷的 jQuery 對象，請使用 $(array_of_DOM_elements) 簽名。

更新後的元素集可用於後續(鏈式)方法，或分配給變量以供以後使用。例如：

$( "p" ).add( "div" ).addClass( "widget" );
var pdiv = $( "p" ).add( "div" );

以下將 not 保存添加的元素，因為 .add() 方法會創建一個新集合，並保持 pdiv 中的原始集合不變：

var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change

考慮一個帶有簡單列表和其後段落的頁麵：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a paragraph</p>

我們可以通過使用選擇器或對 DOM 元素本身的引用作為 .add() 方法的參數來選擇列表項和段落：

$( "li" ).add( "p" ).css( "background-color", "red" );

或者：

$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] )
  .css( "background-color", "red" );

此調用的結果是所有四個元素後麵的紅色背景。使用 HTML 片段作為 .add() 方法的參數(如在第三個版本中)，我們可以動態創建其他元素並將這些元素添加到匹配的元素集。例如，假設我們要更改列表項的背景以及新創建的段落：

$( "li" ).add( "<p id='new'>new paragraph</p>" )
  .css( "background-color", "red" );

盡管新段落已經創建並且它的背景顏色發生了變化，但它仍然沒有出現在頁麵上。要將其放置在頁麵上，我們可以將其中一種插入方法添加到鏈中。

從 jQuery 1.4 開始，來自 .add() 的結果將始終按文檔順序返回(而不是簡單的串聯)。

注意：扭轉.add()您可以使用.not()從 jQuery 結果中刪除元素，或.end()返回到添加之前的選擇。

例子：

查找所有 div 並製作邊框。然後將所有段落添加到 jQuery 對象以將它們的背景設置為黃色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
  p {
    clear: left;
    font-weight: bold;
    font-size: 16px;
    color: blue;
    margin: 0 10px;
    padding: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<p>Added this... (notice no border)</p>
 
<script>
$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
</script>
 
</body>
</html>

演示：

將更多由給定表達式匹配的元素添加到匹配元素集合中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span>Hello Again</span>
 
<script>
$( "p" ).add( "span" ).css( "background", "yellow" );
</script>
 
</body>
</html>

演示：

將更多動態創建的元素添加到匹配的元素集中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
 
<script>
$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
</script>
 
</body>
</html>

演示：

將一個或多個元素添加到一組匹配的元素中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
</script>
 
</body>
</html>

演示：

演示如何向現有集合添加(或推送)元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
var collection = $( "p" );
// Capture the new collection
collection = collection.add( document.getElementById( "a" ) );
collection.css( "background", "yellow" );
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .add()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。