A-A+

jQuery中after() before()和remove()元素替换

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

对于元素替换人我们多半不会使用到after() before()和remove()这种个函数,但今天看到有一种寅出来了我们就分享一下吧。

after() 函数

after() 方法在被选元素后插入指定的内容。

before()函数

before() 方法在被选元素前插入指定的内容。

remove()函数

remove() 方法移除被选元素,包括所有文本和子节点

该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

例子,元素替换,代码如下:

  1. /* 
  2.  * 将A替换成B 
  3.  * after(B)将B插入到A的后面并返回包含A的包装集 
  4.  * remove()删除前面的包装集A 
  5.  **/  
  6. $(A).after(B).remove();  
  7. //简单的插件封装  
  8. $.fn.replaceWidth(ele){  
  9.         return this.after(ele).remove();  
  10. }  

补充另外两种例子

1.replaceWith()

使用括号内的内容替换所选择的内容,代码如下:

  1. $("#div").replaceWith("<div id="div2">div2</div>");  

使用方法如上,将ID为div的元素替换为ID为div2的DIV元素。

2.replaceAll()

将选择的内容替换到括号内的选择器,代码如下:

  1. $("<div>替换后的内容</div>").replaceAll("p");  

使用方法如上,将所有的p标签替换为选择的DIV标签。

标签:

给我留言