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

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。