jQuery.add()

作者：大漠 日期：2011-07-31 点击：1015
jQuery

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

  1. .add(selector)在原有的对像基础上追加更多的指定表达式
  2. .add(elements)在原有的对像基础上追加DOM元素
  3. .add(html)在原有的对象基础上追加一段HTML片段
  4. .add(jQuery object)在原有的对像基础上追加对象
  5. .add(selector,context)支持上下文的匹配

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

  <div class="demo">
     <ul class="test">
	<li>test</li>
	<li>test</li>
	<li>test</li>
	<li>test</li>
     </ul>
     <p class="paragraph">paragraph</p>
     <span id="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

返回顶部