jQuery-2.DOM---节点的复制与替换

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>

DOM替换replaceWith()和replaceAll()

之前学习了节点的内插入、外插入以及删除方法,这节会学习替换方法replaceWith

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

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

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

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

替换第二段的节点与内容

$("p:eq(1)").replaceWith(‘<a >替换第二段的内容</a>‘)

通过jQuery筛选出第二个p元素,调用replaceWith进行替换,结果如下

<div>
    <p>第一段</p>
    <a >替换第二段的内容</a>‘
    <p>第三段</p>
</div>

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

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

$(‘<a >替换第二段的内容</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>

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结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。

<script type="text/javascript">
    $(".aaron1").on(‘click‘, function() {
        //给所有p元素,增加父容器div
        $(‘p‘).wrap(‘<div></div>‘)
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on(‘click‘, function() {
        $(‘a‘).wrap(function() {
            return ‘<div class=" + $(this).text() + " />‘;
        })
    })
    </script>

DOM包裹unwrap()方法

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反,如果删除选中元素的父元素要如何处理 ?

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

看一段简单案例:

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

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

$(‘div‘).remove();

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

$(‘p‘).unwrap();

找到p元素,然后调用unwrap方法,这样只会删除父辈div元素了

结果:

<p>p元素</p>

这个方法比较简单,也不接受任何参数,注意参考下案例的使用即可

<script type="text/javascript">
    $(".aaron1").on(‘click‘, function() {
        //找到所有p元素,删除父容器div
        $(‘p‘).unwrap(‘<div></div>‘)
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on(‘click‘, function() {
        //找到所有p元素,删除父容器div
        $(‘a‘).unwrap(function() {
            return ‘<div></div>‘;
        })
    })
    </script>

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 结构进行包裹。

<script type="text/javascript">
    $(".aaron1").on(‘click‘, function() {
        //给所有p元素,增加父容器div
        $(‘p‘).wrapAll(‘<div></div>‘);
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on(‘click‘, function() {
        //wrapAll接受一个回调函数
        //每一次遍历this都指向了合集中每一个a元素
        $(‘a‘).wrapAll(function() {
            return ‘<div></div>‘
        })
    })
    </script>

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 标签应该是被正确关闭的。

<script type="text/javascript">    $(".aaron1").on(‘click‘, function() {        //给所有class=right1的div元素,增加内部包裹父容器p       $(‘.right1‘).wrapInner(‘<p></p>‘);    })    </script>    <script type="text/javascript">    $(".aaron2").on(‘click‘, function() {        //wrapInner接受一个回调函数        //每一次遍历this都指向了合集中每一个class=left1的div元素        $(‘.left1‘).wrapInner(function() {            return ‘<a></a>‘        })    })    </script>
时间: 2024-10-13 08:55:30

jQuery-2.DOM---节点的复制与替换的相关文章

DOM节点的复制和替换(jQuery)

1DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素.匹配元素的下级元素.文字节点. clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了 例如: HTML部分 <div></div>

JS/jQuery判断DOM节点是否存在

JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

jquery和DOM节点操作方法和属性记录

网上找了份jquery的操作节点方法清单.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.insertBefore(A

jQuery创建DOM节点

1.创建元素节点 $(html)方法会根据传入的html标记字符串,创建一个DOM元素,并将这个DOM换成jquery对象返回.      动态添加的新元素节点不会被自动添加到文档中.      当创建单个元素时,要注意闭合标签和使用标准的xhtml格式.比如 $("<p></p>")   $("<p/>"). 2.创建文本节点 在创建元素节点的时候直接把文本内容写进去$("<p>append内容</p

jQuery操作DOM节点的相关方法

1.在指定节点内插入新节点 以下的内容都用于在打指定节点内添加新内容 1)        append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容. 2)        append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入function(index,html)函数的返回值. 3)        appendTo(selector)

jQuery的DOM 节点操作

一.节点的操作 1.查找节点: var $var_1=$("htmltype"); //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=$(

由莫名其妙的错误开始---浅谈jquery的dom节点创建

有一个字符串是这样的:var s = '<html lang="en" class="js no-touch discourse-no-touch">'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></bo

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 2.使用函数get()访问,例如: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.a

jQuery基础——DOM篇

jQuery基础--DOM篇 在javascript中如何创建节点? 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 例子: document.addEventListener('click',function(){ //创建2个div元素 var rightdiv = document.cre

WEB入门之十六 操作DOM节点

学习内容 jQuery插入DOM节点 jQuery删除DOM节点 jQuery替换DOM节点 jQuery筛选DOM节点 能力目标 能熟练使用jQuery进行节点操作 能熟练使用jQuery进行节点筛选 本章简介 DOM是Document Object Model的缩写,即文档对象模型,它是W3C的标准规范,提供了使用JavaScript操纵页面元素的接口.节点是DOM中最基本的组成单位,每个标签.每个文本都可以看成是一个节点.本章将学习使用jQuery对DOM节点进行操作. 核心技能部分 7.