學習筆記 1.JQuery添加節點相關方法 2.JQuery刪除節點 3.JQuery替換節點 4.JQuery節點的複製 ...
學習筆記
1.JQuery添加節點相關方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery添加節點相關方法</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//**************************************************************內部插入
var $li = $("<li>我是新增的li</li>");
/**
* 1.append:將A元素添加到指定元素B內部的最後
* B作為方法調用者
* A作為方法參數
*/
$("button").click(function () {
$("ul").append($li);
});
/**
* 2.appendTo:將A元素添加到指定元素B內部的最後
* A作為方法調用者
* B作為方法參數
*/
$("button").click(function () {
$li.appendTo("ul");
});
/**
* 3.prepend:將A元素添加到指定元素B內部的最前面
* B作為方法調用者
* A作為方法參數
*/
$("button").click(function () {
$("ul").prepend($li);
});
/**
* 4.prependTo:將A元素添加到指定元素B內部的最前面
* A作為方法調用者
* B作為方法參數
*/
$("button").click(function () {
$li.prependTo("ul");
});
//**************************************************************外部插入
/**
* 1.after:將A元素添加到指定元素B外部的後面
* B作為方法調用者
* A作為方法參數
*/
$("button").click(function () {
$("ul").after($li);
});
/**
* 2.insertAfter:將A元素添加到指定元素B外部的後面
* A作為方法調用者
* B作為方法參數
*/
$("button").click(function () {
$li.insertAfter("ul");
});
/**
* 3.before:將A元素添加到指定元素B外部的前面
* B作為方法調用者
* A作為方法參數
*/
$("button").click(function () {
$("ul").before($li);
});
/**
* 4.insertBefore:將A元素添加到指定元素B外部的前面
* A作為方法調用者
* B作為方法參數
*/
$("button").click(function () {
$li.insertBefore("ul");
});
});
</script>
</head>
<body>
<button>添加節點</button>
<ul>
<li>我是第1個li</li>
<li>我是第2個li</li>
<li>我是第3個li</li>
</ul>
</body>
</html>
2.JQuery刪除節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery刪除節點</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//刪除節點
/**
* 1.remove方法:刪除整個元素
*/
$("button").click(function () {
$("li").remove(".item");
$(".one").remove();
});
/**
* 2.empty方法:清空元素的內容和子元素
*/
$("button").click(function () {
$(".two").empty();
});
/**
* detach方法:和remove方法一模一樣
*/
});
</script>
</head>
<body>
<button>刪除節點</button>
<button>清空節點</button>
<ul>
<li class="item">我是第1個li</li>
<li>我是第2個li</li>
<li class="item">我是第3個li</li>
<li>我是第4個li</li>
<li class="item">我是第5個li</li>
</ul>
<div class="one">我是div1</div>
<div class="two">我是div2
<span>我是span</span>
</div>
</body>
</html>
3.JQuery替換節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery替換元素</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//替換元素
var $h6 = $("<h6>我是標題6</h6>")
/**
* 1.replaceWith方法:替換所有匹配的元素A為指定元素B
* A為方法調用者,B為方法參數
*/
$("button").click(function () {
$("h1").replaceWith($h6);
});
/**
* 2.replaceAll方法:替換所有匹配的元素A為指定元素B
* A為方法參數,B為方法調用者
*/
$("button").click(function () {
$h6.replaceAll("h1");
});
});
</script>
</head>
<body>
<button>替換元素</button>
<h1>我是標題1</h1>
<h1>我是標題1</h1>
<h1>我是標題1</h1>
<h1>我是標題1</h1>
<h1>我是標題1</h1>
</body>
</html>
4.JQuery節點的複製
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery節點的複製</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* clone(false):淺複製,只複製節點,不能複製事件
* clone(true):深複製,複製節點同時複製事件
*/
$("button").eq(0).click(function () {
var $li = $("li:first").clone(false);
$("ul").append($li);
});
$("button").eq(1).click(function () {
var $li = $("li:first").clone(true);
$("ul").append($li);
});
$("li").click(function () {
alert($(this).html());
});
});
</script>
</head>
<body>
<button>淺複製</button>
<button>深複製</button>
<ul>
<li>我是第1個li</li>
<li>我是第2個li</li>
<li>我是第3個li</li>
<li>我是第4個li</li>
<li>我是第5個li</li>
</ul>
</body>
</html>
