jQuery(五)——Dom的增刪改

阿新 • • 發佈：2021-02-01

技術標籤：JavaWeb javascript js html html5 jquery

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>