jQuery(五)——Dom的增删改

最新推荐文章于 2022-06-01 15:34:23 发布

种下一颗草莓

最新推荐文章于 2022-06-01 15:34:23 发布

阅读量226

点赞数

分类专栏： # jQuery 文章标签： javascript js html html5 jquery

本文链接：https://blog.csdn.net/HangHug_L/article/details/113480887

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>