DOM——拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()

简介:

      拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()

1   .clone()深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素和文字节点

2   如果节点有事件或者数据之类的其他处理,需要通过clone(ture)传递一个布尔值ture来指定,不仅克隆单纯的节点结构,还把附带的事件与数据一并克隆了

3   使用clone()时,再将它插入到当前文档之前,可以修改克隆后的元素或者元素内容

4   通过传递true将所有绑定在原始元素上的事件处理函数复制到克隆元素上

5   .clone()是JQuery扩展的,只能处理通过JQuery绑定的事件与数据

6   元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享,如果深度复制所有数据,需要手动一一复制

7   .replaceWith(newContent)用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合,即用$()选择节点A,调用replaceWith方法,传入一个新的内容B(HTML字符串、DOM元素或者JQuery对象)用来替换选中的节点A

8   .replaceAll(target)用集合的匹配元素替换每个目标元素

9   .replaceWith()返回的JQuery对象引用的是替换前的节点,而不是通过.replaceWith() 或者.replaceAll()方法替换后的节点,还可以和其他方法链接使用

10   .replaceWith() 和.replaceAll()功能类似,会删除与节点相关联的所有数据和事件处理程序

11    .replaceWith() 和.replaceAll()目标和源的位置相反

12   .wrap(wrappingElement)在集合中匹配的每个元素周围包裹一个HTML结构

13   .wrap(function)一个回调函数,返回用于包裹匹配元素的HTML内容或JQuery对象

14   使用后的效果与直接传递参数是一样,可以把代码写在函数体内部,写法不同

15   .wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构,这种结构可以嵌套好几层,但只包含一个核心的元素,每个匹配的元素都会被这种结构包裹,该方法返回原始的元素集,以便之后使用链式方法



本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/1983945

相关文章
|
JavaScript
DOM移除、替代、拷贝、遍历
DOM移除、替代、拷贝、遍历
134 0
|
JavaScript 前端开发 开发者
jQuery_CDN、DOM 插入并包裹现有内容|学习笔记
快速学习 jQuery_CDN、DOM 插入并包裹现有内容
179 0
|
Web App开发 JavaScript
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
下一篇
开通oss服务