1. Jquery节点的添加
1. 向元素内部插入节点
- append(content)
将要添加的元素添加到指定元素的后边 - prepend(content)
将要添加的元素添加到指定元素的前边
2. 向元素外部添加节点
after():将元素添加到指定元素外部的后边
before():将元素添加到指定元素外部的前边
<!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)
会将元素添加到指定元素外部的后面
before(content|fn)
会将元素添加到指定元素外部的前面
insertAfter(content)
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>
2.Jquery节点的删除
- remove:传递的参数代表删除指定元素,但是不会将匹配的元素从Jquery对象中删除,,因而可以在将来再使用这些匹配的元素,但是会删除绑定的所有数据和事件
$(“p”).remove() 删除所有段落
$(“p”).remove(".hel") 删除带有.hel类名的段落 - empty:删除指定元素的所有子元素和文本内容,但是不会删除元素自身
helloworld
$("p").empty();
3. detach:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来
<!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])
删除指定元素
empty()
删除指定元素的内容和子元素, 指定元素自身不会被删除
detach([expr])
*/
$("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>
3. Jquery节点的替换
两种替换方法:
replaceWith和replaceAll
selector.replaceWith(“element”) 用匹配的元素替换成指定的HTML 元素
$(“element”)replaceAll(selector) :方法把被选元素替换为新的 HTML 元素。
<!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>
4. Jquery节点的复制
clone:克隆匹配的DOM元素并且选中这些克隆的副本。
appendTo:把所有匹配的元素追加到另一个指定的元素元素集合中。
<!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>