jQuery.add()

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

nike air max 2019 trainers

如需转载,烦请注明出处:https://www.w3cplus.com/blog/99.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部