JQuery --- 第五期 (JQuery节点操作)
程序员文章站
2022-05-03 11:51:31
学习笔记 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>
上一篇： CSS 基础