共计 3640 个字符，预计需要花费 10 分钟才能阅读完成。
1、外部插入
A.append(B) 将 B 插入到 A 的外部前面（之后的串联操作，操作 A）
<A>
....
<B></B>
<A>A.prepend(B) 将 B 插入到 A 的外部后面
<A>
<B></B>
....
<A>A.appendTo(B) 将 A 插入到 B 的外部前面（之后的串联操作，操作 A）
A.prependTo(B) 将 A 插入到 B 的外部后面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_外部插入节点.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>
<ul id="city">
<li id="bj" name="beijing"> 北京 </li>
<li id="tj" name="tianjin"> 天津 </li>
<li id="cq" name="chongqing"> 重庆 </li>
</ul>
<ul id="love">
<li id="fk" name="fankong"> 反恐 </li>
<li id="xj" name="xingji"> 星际 </li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script type="text/javascript">
// 将 tj 插入 到 love 外部 前 或后
var $tj = $("#tj");
var $love = $("#love");
// 后
// $love.append($tj);
// $tj.appendTo($love);
// 前
// $love.prepend($tj);
$tj.prependTo($love);
</script>
</html>2、内部插入
A.after(B) , 将 B 插入到 A 前面（同级）
<A></A>
<B></B>A.before(B)，将 B 插入到 A 后面
<B></B>
<A></A>A.insertAfter(B) , 将 A 插入到 B 前面（同级）
<B></B>
<A></A>A.insertBefore(B) 将 A 插入到 B 后面
<A></A>
<B></B><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04_内部插入节点.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>
<ul id="city">
<li id="bj" name="beijing"> 北京 </li>
<li id="tj" name="tianjin"> 天津 </li>
<li id="cq" name="chongqing"> 重庆 </li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script type="text/javascript">
// 将 city 插入 到 p2 前或后
var $city = $("#city");
var $p2 = $("#p2");
// 后
// $p2.after($city);
// $city.insertAfter($p2);
// 前
// $p2.before($city);
$city.insertBefore($p2);
</script>
</html>3、删除
empty() 清空标签体
remove() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都会被移除
detach() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都保留
l 绑定数据
data(name) 取得
data(name,value) 设置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>05_删除节点.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>
<ul id="city">
<li id="bj" name="beijing"> 北京 <p> 海淀区 </p></li>
<li id="tj" name="tianjin"> 天津 <p> 河西区 </p></li>
<li id="cq" name="chongqing"> 重庆 </li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
// 将 city 移除，再追加 body 前面
//#1 绑定事件
$("#city").click(function(){alert("O(∩_∩)O~");
});
//#2 绑定数据
$("#city").data("itheima","就是屌");
//1 移除
var $city = $("#city").remove(); // 移除绑定的事件、移除绑定的数据
// var $city = $("#city").detach(); // 保留绑定的事件、保留绑定的数据
//2 追加
$("body").append($city);
//#3 取得绑定的数据
alert($("#city").data("itheima"));
</script>
</html>4、复制
clone() 克隆
even：批示事件处理函数是否会被复制。V1.5 以上版本默认值是：false
<body>
<button class="save"> 保留 </button><br>
<p> 段落 </p>
</body>
<script type="text/javascript">
$(".save").click(function(){var $new = $(this).clone(true);
$("body").append($new);
});
</script>5、替换
A.replaceWith(B)，应用 A 将 B 替换掉
A.replaceAll(B)，应用 B 将 A 替换掉
<html>
<p> 段落 </p>
<p> 段落 </p>
<p> 段落 </p>
<button> 保留 </button>
</html>
<script type="text/javascript">
// $("p").replaceWith("<a>xxx</a> <br/>");
$("<a>xxx</a> <br/>").replaceAll("p");
</script>6、包裹
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 的父元素删除，本人留着
<body>
<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
</body>
<script type="text/javascript">
// 每一个包
// $("strong").wrap("<div></div>");
// 一个包
// $("strong").wrapAll("<div></div>");
// 标签体
$("strong").wrapInner("<div></div>");
</script>
正文完
发表至： javascript
2021-03-17
