jQuery教程 jQuery节点的复制与替换解析
沉沙 2018-07-24 来源 : 阅读 1188 评论 0

摘要:本篇jQuery教程探讨了jQuery节点的复制与替换,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

1.DOM拷贝clone()

克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆

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

clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了

例如:

HTML部分

<div></div>

 

JavaScript部分

$("div").on('click', function() {//执行操作})

//clone处理一

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

//clone处理二

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

使用上就是这样简单,使用克隆的我们需要额外知道的细节:

· clone()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色

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

· clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据
元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。深复制的所有数据,需要手动复制每一个

示例代码:

    <script type="text/javascript">

        //只克隆节点

        //不克隆事件

        $(".aaron1").on('click', function() {

            $(".left").append( $(this).clone().css('color','red') )

        })

    </script>

 

    <script type="text/javascript">

        //克隆节点

        //克隆事件

        $(".aaron2").on('click', function() {

            console.log(1)

            $(".left").append( $(this).clone(true).css('color','blue') )

        })

    </script>

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

.replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

简单来说:用$()选择节点A,调用replaceWith方法,传入一个新的内容B(HTML字符串,DOM元素,或者jQuery对象)用来替换选中的节点A

看个简单的例子:一段HTML代码

<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( target ) :用集合的匹配元素替换每个目标元素

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

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

总结:

· .replaceAll()和.replaceWith()功能类似,主要是目标和源的位置区别

· .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

· .replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用

· .replaceWith()方法返回的jQuery对象引用的是替换前的节点,而不是通过replaceWith/replaceAll方法替换后的节点

示例代码:

    <script type="text/javascript">

    //只克隆节点

    //不克隆事件

    $(".bt1").on('click', function() {

        //找到内容为第二段的p元素

        //通过replaceWith删除并替换这个节点

        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')

    })

    </script>

    <script type="text/javascript">

    //找到内容为第六段的p元素

    //通过replaceAll删除并替换这个节点

    $(".bt2").on('click', function() {

        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');

    })

    </script>

3.DOM包裹wrap()方法

如果要将元素用其他元素包裹起来,也就是给它增加一个父元素,针对这样的处理,JQuery提供了一个wrap方法

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

简单的看一段代码:

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

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

<div>

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

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

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

以第一个案例为例:

$('p').wrap(function() {

    return '<div></div>';   //与第一种类似,只是写法不一样

})

注意:

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

4.DOM包裹unwrap()方法

jQuery提供了一个unwrap()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

看一段简单案例:

<div>

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

我要删除这段代码中的div,一般常规的方法会直接通过remove或者empty方法

$('div').remove();
但是如果我还要保留内部元素p,这样就意味着需要多做很多处理,步骤相对要麻烦很多,为了更便捷,jQuery提供了unwrap方法很方便的处理了这个问题

$('p').unwrap();
找到p元素,然后调用unwrap方法,这样只会删除父辈div元素了

结果:

<p>p元素</p>

5.DOM包裹wrapAll()方法

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

.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()方法

如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个wrapInner方法

.wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的HTML结构

听起来有点绕,可以用个简单的例子描述下,简单的看一段代码:

<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>

注意:

当通过一个选择器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被正确关闭的。

 

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程