您的位置：首页 > Web前端 > JQuery

jQuery文档处理(二)--复制，替换，包裹

2016-12-20 17:24 435 查看

jQuery文档处理(二)–复制，替换，包裹

复制

clone() 克隆

even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>06_复制节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<button id="save">保存</button><br>
<p>段落</p>
</body>
<script type="text/javascript">
$(document).ready(function(){
//点击按钮时，克隆按钮自己
$("#save").click(function(){
var $new = $(this).clone(true);//克隆，参数为true，会复制事件，默认是false不会复制事件
//显示克隆出的按钮
$("body").append($new);
});
});
</script>
</html>

替换

A.replaceWith(B) ，使用A将B替换掉

A.replaceAll(B) ，使用B将A替换掉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07_替换节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<html>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<button>保存</button>
</html>
<script type="text/javascript">
$(document).ready(function(){
//把p替换成a标签
//$("p").replaceWith("<a>dly</a><br/>");
$("<a>dly</a><br/>").replaceAll($("p"));
});
</script>
</html>

包裹

A.wrap(B) ，使用B将每一个A进行包裹（多个B）

<B><A></A></B>
<B><A></A></B>

A.wrapAll(B) ，使用B将所有A进行包裹（一个B）

<B>
<A></A>
<A></A>
</B>

A.wrapInner(B) ,使用B将每一个A的标签体包裹。

<A><B>。。。</B></A>
<A><B>。。。</B></A>

A.unwrap() ，将A的父元素删除，自己留着

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>包裹节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

</head>

<body>
<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
</body>
<script type="text/javascript">
$(document).ready(function(){
//每个strong都分别被div包裹
//$("strong").wrap("<div></div>");
//所有strong被一个div包裹
$("strong").wrapAll("<div></div>");
//包裹strong内部的内容
//$("strong").wrapInner("<div></div>");
$("strong").unwrap();//去除包裹，去除的是外部包裹(也就是包裹的父标签),去除的是wrap方法包裹的，其他两个都不能去除
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 文档处理复制替换包裹

相关文章推荐

新的分享

章节导航