<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>
div {
background: #bbffaa;
width: 300px;
}
style>
head>
<body>
<h2>通过empty移除元素h2>
<div id="test">
<p>p元素1p>
<p>p元素2p>
div>
<button>点击通过jQuery的empty移除元素button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前div元素下的所有p元素
//但是本身id=test的div元素没有被删除
$("#test").empty()
})
script>
body>
html>
remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的JQuery数据(自带事件销毁方法,防止内存泄露)
<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>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
style>
head>
<body>
<h2>通过jQuery remove方法移除元素h2>
<div class="test1">
<p>p元素1p>
<p>p元素2p>
div>
<div class="test2">
<p>p元素3p>
<p>p元素4p>
div>
<button>通过点击jQuery的empty移除元素button>
<button>通过点击jQuery的empty移除指定元素button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中,包含了3的元素
//这个也是一个过滤器的处理
//带参数的remove
$("p").remove(":contains('3')")
})
script>
body>
html>
$(“div”).detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">script>
<style type="text/css">
p {
color: red;
}
style>
head>
<body>
<p>P元素1,默认给绑定一个点击事件p>
<p>P元素2,默认给绑定一个点击事件p>
<button id="bt1">点击删除 p 元素button>
<button id="bt2">点击移动 p 元素button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见,但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
script>
body>
html>
.clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。
注:
如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了
常用部分如下:
HTML部分
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() //只克隆了结构,事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
<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()
$("p:eq(1)").replaceWith('替换第二段的内容' )
//replaceAll()
$('替换第二段的内容').replaceAll('p:eq(1)')
<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('replaceWith替换第二段的内容')
})
script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").on('click', function() {
$('replaceAll替换第六段的内容').replaceAll('.right > div:last p:last');
})
script>
body>
html>
在集合中匹配的每个元素周围包裹一个HTML结构
如:
//给p元素增加一个div包裹
<p>p元素p>
$('p').wrap('<div>div>')
例子:
<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元素增加父容器divbutton>
<button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器divdiv>
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('')
})
script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
$('a').wrap(function() {
return 'this).text() + '" />';
})
})
script>
body>
html>
unwrap()方法
与wrap方法相反,将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
<div>
<p>p元素p>
div>
$('p').unwrap();
<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: 120px;
}
.left div,
.right div {
width: 100px;
height: 120px;
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包裹unwrap()方法h2>
<div class="left">
<div class="aaron1">点击,通过unwrap方法给p元素删除父容器divdiv>
<div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器divdiv>
div>
<div class="right">
<div>
<p>p元素p>
div>
<div>
<p>p元素p>
div>
div>
<div class="left">
<div>
<a>a元素a>
div>
<div>
<a>a元素a>
div>
div>
<script type="text/javascript">
$(".aaron1").on('click', function() {
//找到所有p元素,删除父容器div
$('p').unwrap('')
})
script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//找到所有p元素,删除父容器div
$('a').unwrap(function() {
return '';
})
})
script>
body>
html>
wrapAll()
给 集合 中匹配的元素增加一个外面包裹HTML结构
如下例子:
//给所有p元素增加div
<p>p元素p>
<p>p元素p>
$('p').wrapAll('<div>div>')
<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: 120px;
}
.left div,
.right div {
width: 100px;
/*height: 120px;*/
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包裹wrapAll()方法h2>
<div class="left">
<div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器divdiv>
<div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器divdiv>
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').wrapAll('');
})
script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//wrapAll接受一个回调函数
//每一次遍历this都指向了合集中每一个a元素
$('a').wrapAll(function() {
return ''
})
})
script>
body>
html>
wrapInner()方法
给集合中匹配的元素的内部,增加包裹的HTML结构
如下例子:
//给所有元素增加一个p包裹
<div>p元素div>
<div>p元素div>
$('div').wrapInner('')
<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元素增加内部父容器pdiv>
<div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器adiv>
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('');
})
script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//wrapInner接受一个回调函数
//每一次遍历this都指向了合集中每一个class=left1的div元素
$('.left1').wrapInner(function() {
return ''
})
})
script>
body>
vhtml>