jQuery中的.add()是用来追加元素的一种方法，.add(expr,[context])把与表达式匹配的元素添加到jQuery对象中。他可以用于连接分别与两个表达式匹配的元素结果集。jQuery API中是这样描述.add()方法：

下分具体来看.add()各种方法如何在实际中实现效果，为了更好的说明问题，我先创建一个DOM树。

<div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <p>paragraph</p> <span>test span</span> </div>

应用一点初步样式：

ul.test { overflow: hidden; } ul.test li { width: 50px; height: 50px; float: left; display: inline; border: 1px solid green; margin-right: 10px } .paragraph { clear: both; padding: 5px; border: 1px solid orange; margin-top: 10px; } 一、.add(selector):

.add(selector)就是在对像原有的基础上追加相匹配的元素，其中selector表示找到更多的元素追加到对像的一个表达式。简单一点就是选择器。如：

<script type="text/javascript"> $(function(){ $("ul.test li").add(".paragraph").css("background","green"); }); </script>

上面JQ表示的是：$("ul.test li")选择了ul.test所有列表项，而.add(".paragraph")所表示的是在原选择的基础上在追加选中了一个class叫“.paragraph”元素，并在选中的jQuery的对象上应用了一个样式“.css("background","green")”。其实这里的.add(selector)就相当于一个多选择器一样，我们也可以把上面的jQuery代码换成：

<script type="text/javascript"> $(function(){ $("ul.test li,.paragraph").css("background","green"); }); </script>

效果：

总结：jQuery中的.add(selector)所起作用就是类似于jQuery的多选择器“$(selector1,selector2)”。其中.add(selector)中也可以是多项选择，如.add(selector1,selector2,...,selecotrN)。

二、.add(elements)

.add(elements)表示的是在jQuery原对像的基础上追加一个或多个HTML元素，其实其起作用很像.add(selector)的效果，如：

<script type="text/javascript"> $(function(){ $("ul.test li").add(".demo p").css("border","3px dotted red"); }); </script>

上所表示的意思是，在ul.test的列表基础上追加了div.demo下的所有p元素，并应用了样式“border: 3px dotted red”。效果如下：

总结：.add(elements)和.add(selector)极其相似，其区别之处在于.add(selector)中的selector是html的各种选择器，而.add(elements)中的elements是html元素标签。但实现的效果都是一致的，就是把元素追加到jQuery的对象中形成一个新的元素集合。

三、.add(html)

.add(html)是指在jQuery对象的基础上追加一段HTML片段。可以动态的创建html的DOM元素，如：

<script type="text/javascript"> $(function(){ $(".paragraph").clone().add("<span>新创建的一个span标签</span>").appendTo("div.demo"); }); </script>

上面所表示的是:首选通过.clone()方法客隆了一个p.paragraph元素，并在此基础上通过.add("<span>新创建的一个span标签</span>")追加了一个span元素，并将这个组合的新元素集合通过.appendTo()插入到div.demo这个元素中。如图所示：

四、.add(jQuery object)

.add(jQuery object)是在jQuery对像上追加现有的jQuery对像，从而形成新的元素集合

<script type="text/javascript"> $(function(){ $(".paragraph").add(document.getElementById("span")).css("background","lime"); }); </script>

效果：

总结：从上面的效果图中不难发现.add(jQuery object)和前面所说的.add(selector)以及.add(elements)所达到的效果就是一样的，就是在原对像的基础上追加相匹配的元素，从而形成一个新的元素集合。

五、.add(selector,content)

简单理解就是根据上下文追加新元素。类似于$(selector,content)。如：

<script type="text/javascript"> $(function(){ var ultest = $("ul.test"); $("#span").click(function(){ $(".paragraph").add(ultest,document).hide(); }); }); </script>

上面效果不用说，大家都知道，点击#span后p.paragraph和ul.test将被隐藏，请看firebug下的截图（点击后的）

上面简单介绍了jQuery中的.add()的使用方法，规纳起来，其主要是起得作用就是在jQuery中选中对像基础上追加相应的元素，形成一个新的元素集合。

如需转载烦请注明出处：W3CPLUS