什麼是節點？
創建一個節點
var $li = $("<li>新增的li</li>");
51-jQuery添加節點相關方法
內部插入
- 會將元素添加到指定元素內部的最後
append(content|fn)
例子：$("ul").append($li);
appendTo(content)
例子：$li.prependTo("ul");
- 會將元素添加到指定元素內部的最前面
prepend(content|fn)
prependTo(content)
外部插入
-
會將元素添加到指定元素外部的後面
after(content|fn)
insertAfter(content) -
會將元素添加到指定元素外部的前面
before(content|fn)
例子：$("ul").before($li);
insertBefore(content)
例子：$li.insertAfter("ul");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>51-jQuery添加節點相關方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
內部插入
append(content|fn)
appendTo(content)
會將元素添加到指定元素內部的最後
prepend(content|fn)
prependTo(content)
會將元素添加到指定元素內部的最前面
外部插入
after(content|fn)
insertAfter(content)
會將元素添加到指定元素外部的後面
before(content|fn)
insertBefore(content)
會將元素添加到指定元素外部的前面
*/
$("button").click(function () {
// 1.創建一個節點
var $li = $("<li>新增的li</li>");
// 2.添加節點
$("ul").append($li);
$("ul").prepend($li);
// $li.appendTo("ul");
// $li.prependTo("ul");
// $("ul").after($li);
// $("ul").before($li);
// $li.insertAfter("ul");
});
});
</script>
</head>
<body>
<button>添加節點</button>
<ul>
<li>我是第1個li</li>
<li>我是第2個li</li>
<li>我是第3個li</li>
</ul>
<div>我是div</div>
</body>
</html>
52-jQuery刪除節點相關方法
- remove([expr])刪除指定元素(利用remove刪除之後再重新添加,原有的事件無 法響應)
- detach([expr])刪除指定元素(利用detach刪除之後再重新添加,原有事件可以響應)
- empty([expr])刪除指定元素的內容和子元素, 指定元素自身不會被刪除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>52-jQuery刪除節點相關方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
刪除
remove([expr])刪除指定元素(利用remove刪除之後再重新添加,原有的事件無法響應)
detach()刪除指定元素(利用detach刪除之後再重新添加,原有事件可以響應)
empty()
刪除指定元素的內容和子元素, 指定元素自身不會被刪除
*/
$("button").click(function () {
// $("div").remove();
// $("div").empty();
// $("li").remove(".item");
// 利用remove刪除之後再重新添加,原有的事件無法響應
// var $div = $("div").remove();
// 利用detach刪除之後再重新添加,原有事件可以響應
var $div = $("div").detach();
// console.log($div);
$("body").append($div);
});
$("div").click(function () {
alert("div被點擊了");
});
});
</script>
</head>
<body>
<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>我是div
<p>我是段落</p>
</div>
</body>
</html>
53-jQuery替換節點相關方法
- 替換所有匹配的元素爲指定的元素
replaceWith(content|fn)
例子：$("h1").replaceWith($h6);
replaceAll(selector)
例子：$h6.replaceAll("h1");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-jQuery替換節點相關方法</title>
<script src="../jQuery基礎/js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
替換
replaceWith(content|fn)
replaceAll(selector)
替換所有匹配的元素爲指定的元素
*/
$("button").click(function () {
// 1.新建一個元素
var $h6 = $("<h6>我是標題6</h6>");
// 2.替換元素
// $("h1").replaceWith($h6);
$h6.replaceAll("h1");
});
});
</script>
</head>
<body>
<button>替換節點</button>
<h1>我是標題1</h1>
<h1>我是標題1</h1>
<p>我是段落</p>
</body>
</html>
54-jQuery複製節點相關方法
- clone([Even[,deepEven]])
如果傳入false就是淺複製, 如果傳入true就是深複製,
淺複製只會複製元素, 不會複製元素的事件
深複製會複製元素, 而且還會複製元素的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>54-jQuery複製節點相關方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// clone([Even[,deepEven]])
/*
如果傳入false就是淺複製, 如果傳入true就是深複製
淺複製只會複製元素, 不會複製元素的事件
深複製會複製元素, 而且還會複製元素的事件
*/
$("button").eq(0).click(function () {
// 1.淺複製一個元素
var $li = $("li:first").clone(false);
// 2.將複製的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).click(function () {
// 1.深複製一個元素
var $li = $("li:first").clone(true);
// 2.將複製的元素添加到ul中
$("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>