jQuery基础(二)—DOM篇——节点的复制与替换

1、DOM拷贝clone()

//clone处理一
$("div").clone()   //只克隆了结构,事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

使用克隆的我们需要额外知道的细节:

clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如 $(this).clone().css('color','red') 增加了一个颜色
通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上
clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据
元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个

http://js.jirengu.com/necamexopa/1/

2、DOM替换replaceWith()和replaceAll()

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')
通过jQuery筛选出第二个p元素,调用replaceWith进行替换,结果如下

<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'
    <p>第三段</p>
</div>

.replaceAll()和.replaceWith()功能类似,但是目标和源相反,用上述的HTML结构,我们用replaceAll处理

$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
http://js.jirengu.com/vavariname/1/

3、DOM包裹wrap()方法

http://js.jirengu.com/didibupija/1/

4、DOM包裹unwrap()方法

http://js.jirengu.com/veloqojama/1/

5、DOM包裹wrapAll()方法

wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法
http://js.jirengu.com/woxevotufe/1/

.wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构
简单的看一段代码:

<p>p元素</p>
<p>p元素</p>

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')
最后的结构,2个P元素都增加了一个父div的结构

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

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

通过回调的方式可以单独处理每一个元素

以上面案例为例,

$('p').wrapAll(function() {
    return '<div><div/>'; 
})
以上的写法的结果如下,等同于warp的处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意:
.wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。

6、DOM包裹wrapInner()方法

<div>p元素</div>
<div>p元素</div>
给所有元素增加一个p包裹

$('div').wrapInner('<p></p>')
最后的结构,匹配的di元素的内部元素被p给包裹了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

.wrapInner( function ) :允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容

以上面案例为例,

$('div').wrapInner(function() {
    return '<p></p>'; 
})
以上的写法的结果如下,等同于第一种处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

http://js.jirengu.com/yurupomevu/1/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,384评论 0 8
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 844评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,049评论 0 9
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再见理想冷雨夜阅读 497评论 0 1
  • 如果说下雨是云朵流的泪 那天空为什么让云朵伤心呢? 如果说月亮的圆缺是嫦娥的心情所定 那吴刚为什么让嫦娥难过呢? ...
    荼兔兔荼阅读 148评论 1 2