jQuery DOM节点的复制、替换
拷贝clone()
克隆节点是DOM的常见操做，jQuery提供一个clone方法，专门用于处理dom的克隆javascript
.clone()方法深度复制全部匹配的元素集合，包括全部匹配元素、匹配元素的下级元素、文字节点。
clone方法比较简单就是克隆节点，可是须要注意，若是节点有事件或者数据之类的其余处理，咱们须要经过clone(ture)传递一个布尔值ture用来指定，这样不单单只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆css
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操做})
//clone处理一
$("div").clone() //只克隆告终构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
克隆额外细节html
clone()方法时，在将它插入到文档以前，咱们能够修改克隆后的元素或者元素内容，以下述代码我 $(this).clone().css('color','red') 增长了一个颜色java
经过传递true，将全部绑定在原始元素上的事件处理函数复制到克隆元素上jquery
clone()方法是jQuery扩展的，只能处理经过jQuery绑定的事件与数据数组
元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的全部数据，须要手动复制每个app
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
</style>
</head>
<body>
<h2>经过clone克隆元素</h2>
<div class="left">
<div class="aaron1">点击,clone浅拷贝</div>
<div class="aaron2">点击,clone深拷贝,能够继续触发建立</div>
</div>
<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>
</body>
</html>
替换replaceWith()和replaceAll()
.replaceWith( newContent )
用提供的内容替换集合中全部匹配的元素而且返回被删除元素的集合。简单来讲：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点Adom
一段简单的HTML代码例子：函数
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
替换第二段的节点与内容ui
$("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方法替换后的节点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">点击,经过replaceWith替换内容</button>
<button class="bt2">点击,经过rreplaceAll替换内容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<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>
</body>
</html>
包裹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结构。这种结构能够嵌套了好几层深，但应该只包含一个核心的元素。每一个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便以后使用链式方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left div,
.right div {
width: 100px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
.right div {
background: yellow;
}
p {
border: 1px solid red;
}
a {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>DOM包裹wrap()方法</h2>
<div class="left">
<button class="aaron1">点击,经过wrap方法给p元素增长父容器div</button>
<button class="aaron2">点击,经过wrap的回调方法给a元素增长父容器div</button>
</div>
<div class="right">
<p>p元素</p>
<p>p元素</p>
</div>
<div class="left">
<a>a元素</a>
<a>a元素</a>
</div>
<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>
</body>
</html>
包裹unwrap()方法
咱们能够经过wrap方法给选中元素增长一个包裹的父元素。相反，若是删除选中元素的父元素要如何处理 ?
jQuery提供了一个unwrap()方法 ，做用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，若是存在）在原来的位置
<div>
<p>p元素</p>
</div>
// 要删除这段代码中的div，通常常规的方法会直接经过remove或者empty方法
// $('div').remove();
// 但若是还保留内部元素p，就意味着须要更多处理，unwrap方法则能很方便的处理了这个问题
$('p').unwrap();
//找到p元素，而后调用unwrap方法，这样只会删除父辈div元素了
//结果：<p>p元素</p>
包裹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 结构进行包裹
包裹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 标签应该是被正确关闭的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.left,
.right {
width: 250px;
height: 130px;
}
.left div,
.right div {
width: 100px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
.right div {
background: yellow;
}
p {
border: 1px solid red;
}
a {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>DOM包裹wrapInner()方法</h2>
<div class="left">
<div class="aaron1">点击,经过wrapInner方法给全部div元素增长内部父容器p</div>
<div class="aaron2">点击,经过wrapInner的回调方法给每一个div元素增长内部父容器a</div>
</div>
<div class="right">
<div class="right1">p元素</div>
<div class="right1">p元素</div>
</div>
<div class="left">
<div class="left1">a元素</div>
<div class="left1">a元素</div>
</div>
<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>
</body>
</html>
- 1. jQuery(3-6)复制节点替换节点包裹节点
- 2. jQuery（替换节点、复制节点&事件绑定&jquery$符号用法1.3）
- 3. jQuery插入,复制、替换和删除节点
- 4. jQuery:插入,复制,替换和删除节点
- 5. jQuery DOM节点
- 6. 尚硅谷：jQuery的替换节点
- 7. jquery DOM 建立、插入、删除 、复制、替换、包裹
- 8. DOM节点的插入（jQuery）
- 9. jQuery克隆和替换节点
- 10. (16)JQuery - 克隆和替换节点
- 更多相关文章...
- • XML DOM 替换节点 - XML DOM 教程
- • XML DOM 节点 - XML DOM 教程
- • 漫谈MySQL的锁机制
- • Docker容器实战(六) - 容器的隔离与限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。