请选择 进入手机版 | 继续访问电脑版

jQuery Dom操作(二)

2018-11-9 09:34
640
五、DOM复制节点/替换节点

1、clone()方法
.clone()方法深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。如果节点有事件或者数据之类的其他处理,此时需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了
举例:
  1. [/code]
  2. [b]2、replaceWith()和replaceAll()[/b]
  3. [b]replaceWith( newContent )[/b]:用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。简单来说:用$()选择节点A,调用replaceWith方法,传入一个新的内容B(HTML字符串,DOM元素,或者jQuery对象)用来替换选中的节点A。
  4. [b]replaceAll( target )[/b] [b]:[/b]用集合的匹配元素替换每个目标元素。replaceAll()和.replaceWith()功能类似,但是目标和源相反,用上述的HTML结构,我们用replaceAll处理
  5. [list].replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序[b].replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用[/b][b].replaceWith()方法返回的jQuery对象引用的是替换前的节点[/b],而不是通过replaceWith/replaceAll方法替换后的节点
  6. [/list][code]
复制代码
六、DOM包裹 wrap() 去包裹 unwrap()

在集合中匹配的每个元素周围包裹一个HTML结构。JQuery提供了一个wrap方法将元素用其他元素包裹起来,也就是给它增加一个父元素。
两种调用方式:.wrap( wrappingElement ) .wrap( function )
举例
  1. [/code]jQuery提供了一个unwrap()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
  2. 举例
  3. [code]
复制代码
wrapAll()方法:
wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加同一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法
.wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构
.wrapAll( function ):一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象
  1. [/code][b]wrapInner()方法:[/b]
  2. JQuery提供了一个wrapInner方法将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素
  3. [b].wrapInner( wrappingElement ):[/b]给集合中匹配的元素的内部,增加包裹的HTML结构
  4. [b].wrapInner( function ):[/b]允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容
  5. [code]
复制代码
参考教程:

jQuery教程_DOM篇-慕课网​www.imooc.com jQuery Dom操作(二)-1.jpg
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部