• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • add()

    创建一个新的jQuery对象,元素添加到匹配的元素集合中。

    .add(selector)
    • selector类型: Selector。一个字符串表示的选择器表达式,找到更多的元素添加到匹配的元素集合。
    .add(elements)
    • elements类型: Element。一个或多个元素添加到匹配的元素集合。
    .add(html)
    • html类型: HTML。HTML片段添加到匹配的元素集合。
    .add(jQuery object)
    • jQuery object类型: jQuery object 。一个现有的jQuery对象添加到匹配的元素集合。
    .add(selector, context)
    • selector类型: Selector。一个字符串表示的选择器表达式,找到更多的元素添加到匹配的元素集合。
    • context类型: Element。指定选择器查找元素所在的上下文;类似$(selector, context)方法的context(上下文)参数。

    鉴于一个jQuery对象,表示一个DOM元素的集合,.add()方法通过传递这些元素组合到该方法构造一个新的jQuery对象。.add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用。

    不要假设此方法会按照传递给.add()方法的参数的顺序添加到已经存在的集合中。如果所有元素都属于同一个文档,.add()方法所返回的集合将会按照元素在文档中出现的位置进行排序;也就是说,按照每个元素在文档中出现的顺序。如果集合中包含不同文档或不属于任何文档的元素,那么排序是不确定的。要创建一个包含定义良好元素顺序和无顺序开销的的jQuery对象,请使用$(array_of_DOM_elements)

    他更新的元素集合,可以使用以下面的链式调用,或分配给一个变量供以后使用。例如:

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

    下面将不会保存添加的元素,因为在.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 的插入方法。

    在jQuery 1.4结果从.add()将总是返回文档顺序(而不是一个简单的串联)。

    注意:要使用.add()相反的方法,您可以使用.not(elements | selector)从jQuery返回中移除元素,或使用.end()返回到添加之前的选择(集合)。

    例子

    查找所有的 div,并且添加一个边框。然后将所有的段落添加到 jQuery 对象中,并将它们的背景色变成黄色。

    <!DOCTYPE html>
    <html>
    <head>
      <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://www.lanmper.cn/static/js/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>
    

    Added this...(notice no border)

    根据给定的表达式,向匹配的元素集合中添加一些元素。

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/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>
    

    Hello

    Hello Again

    动态的向匹配的元素集合中添加一些元素。

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>Hello</p>
    <script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script>
     
    </body>
    </html>
    

    Hello

    向匹配的元素集合中添加一些元素对象。

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/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>
    

    Hello

    Hello Again

    以下示例展示了如何向一个已经存在的集合中添加元素。

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/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>
    

    Hello

    Hello Again

    上篇:end()

    下篇:addBack()