Dom的增删改
1. 介绍
内部插入： 父子关系
- appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
- prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
外部插入： 兄弟关系
- insertAfter() a.insertAfter(b) 得到 ba
- insertBefore() a.insertBefore(b) 得到 ab
替换:
- replaceWith() a.replaceWith(b) 用 b 替换掉 a 留下b；所有的a用一个b替换
- replaceAll() a.replaceAll(b) 用 a 替换掉所有 b 留下a；一个a替换一个b
删除： 无参
- remove() a.remove(); 删除 a 标签
- empty() a.empty(); 清空 a 标签里的内容
（）里的元素参数：以appendTo() 为例
- 可以是( “div” )
- 也可以是自己查，( $(“div”) )
2. appendTo练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-31</title>
<style type="text/css">
select {
width: 100px;
height: 180px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
--------------------功能在此完善--------------------
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
界面如下所示，完成如下功能：
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// 第一个按钮 【选中添加到右边】
$("button:eq(0)").click(function () {
$("select:eq(0) > option:selected").appendTo($("select:eq(1)"));
});
// 第二个按钮 【全部添加到右边】
$("button:eq(1)").click(function () {
$("select:eq(0) > option").appendTo($("select:eq(1)"));
});
// 第三个按钮 【选中删除到左边】
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
}); 由于只有父子关系，optipn下面没有子元素，所以加不加>都行，加了更严谨
// 第四个按钮 【全部删除到左边】
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
3. 替换测试
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
----------------填入两个测试语句:replaceWith()和replaceAll()----------------
});
</script>
</head>
<body>
<br/><br/>
<div>1234</div>
<h5>我是陆亿行</h5>
<div>5678</div>
</body>
</html>
未填入前：
-
$("div").replaceWith( $("<h1>我才是陆亿行</h1>") );
所有的div标签被括号里的()标签取代
-
$("<h1>我才是陆亿行</h1>").replaceAll( "div" );
逐个替换
