【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(1)
在jQuery入门篇中我们了解了jQuery的基本使用，对jQuery语法、选择器、入口函数、鼠标事件以DOM文档获取与设置等基本操作，对DOM文档操作而言，获取和设置是较为基础的，如果对一个已经存在的DOM文档中的<ul><li>进行调整节点内容，直接通过获取和设置这两个方法操作DOM还是很不方便的。
本篇将分享jQuery对DOM文档的一些进阶操作，如何操作DOM文档中元素的添加和删除。
一、添加元素
JQuery中提供了四方法添加元素
append() 在元素内部结尾插入
prepend() 在元素开内部头插入
after() 在元素之后
before() 在元素之前插入
知识点
append()和perend() 是在被选中元素内部开头或结尾插入新元素
after()和before() 是在选被中元素之前或之后插入新元素
append 和 prepend 是在被选中元素内部开头或结尾插入新元素
<ul id="ul1">
<li>电脑</li>
<li>手机</li>
<li>平板</li>
<li>服务器</li>
</ul>
<button id="btn1">append 结尾插入</button>
<button id="btn2">prepend 开头插入</button>
<script>
// 操作ul列表
$("#btn1").click(function(){
$("#ul1").append("<li style='color:red;'>新增元素-由append()添加</li>");
});
$("#btn2").click(function(){
$("#ul1").prepend("<li style='color:red;'>新增元素-由prepend()添加</li>");
});
</script>
<p id="p1" >我是一个无情的文本</p>
<button id="btn3">append 结尾插入</button>
<button id="btn4">prepend 开头插入</button>
<script>
// 操作p元素
$("#btn3").click(function(){
$("#p1").append("，是的");
});
$("#btn4").click(function(){
$("#p1").prepend("如你希望的?");
});
</script>
通过append 和 prepend 向body 批量添加元素
<button id="btn5">body.append()</button>
<button id="btn6">body.prepend()</button>
<script>
// 批量添加元素
// 这些元素可以通过text/HTML、JavaScript或jQuery/DOM来创建，最后通过append()和prepend()把这些新元素追加到DOM文档中
var p1 = "<p>我是第一段，html标签创建的</p>";
var p2 = document.createElement("p");
p2.innerHTML="我是第二段，js原生创建的";
var p3 = $("<p></p>").text("我是第三段，jQuery创建的");
var p4 = "<p>我是第四段，html标签创建的</p>";
var p5 = "<p>我是第五段，html标签创建的</p>";
var p6 = "<p>我是第六段，html标签创建的</p>";
$("#btn5").click(function(){
$("body").append(p1,p2,p3); // 可以接收单个或多个新元素,用逗号分隔，不限数量
});
$("#btn6").click(function(){
$("body").prepend([p1,p2,p3],[p4,p5,p6]); //也可以接收列表，用逗号分隔，不限数量
});
</script>
after 和 before 是在被选中元素之前或之后插入新元素
<span id="span1" style="color:red;" >我是第二名_p标签</span></br>
<button id="btn7">after()元素之后插入新元素</button>
<button id="btn8">before()元素之前插入新元素</button>
<script>
$("#btn7").click(function(){
$("#span1").after("<b> -- 我是第三名_b标签</b>");
});
$("#btn8").click(function(){
$("#span1").before("<i>我是第一名_i标签 -- </i>");
});
</script>
向被选中元素 之前或之后 批量添加元素
<p id="p2" style="color:red;">我就是那个被选中的</p>
<button id="btn9">after()元素之后批量插入新元素</button>
<button id="btn10">before()元素之前批量插入新元素</button>
<script>
// 批量添加元素
// 这些元素可以通过text/HTML、JavaScript或jQuery/DOM来创建，最后通过append()和prepend()把这些新元素追加到DOM文档中
var p1 = "<p>我是第一段，html标签创建的</p>";
var p2 = document.createElement("p");
p2.innerHTML="我是第二段，js原生创建的";
var p3 = $("<p></p>").text("我是第三段，jQuery创建的");
$("#btn9").click(function(){
$("#p2").after(p1,p2,p3);
});
$("#btn10").click(function(){
$("#p2").before(p1,p2,p3);
});
</script>
二、删除元素
jQuery中提供了两个方法删除元素
remove() 删除被选中的元素(含所有子元素)
empty() 从被选的元素中删除子元素
知识点
remove() 方法可以接受一个参数,允许筛选指定的元素进行删除(通过选择器),但一定要注意它只能作用于同级，不能直接作用于子元素
$(选择符) 语法返回结果是一个元素列表，而被选中元素中如果有子元素是不包含在这个列表中的，所以当你remove(子元素)时因为列表中没有包含子元素所以删除是无效的，也是为什么remove()只能用于同级元素筛选删除的原因。
remove和empty 进行元素删除
<p>empty()从被选的元素中删除子元素</p>
<div id="div1" style="width:200px;height:200px;background-color:red;">
<p>我是老大</p>
<p class="p2">我是老二(class=p2)</p>
<p class="p2">我是老三(class=p2)</p>
<p>我是老四</p>
<p>我是老五</p>
</div></br>
<button id="btn11">remove() 删除div元素（含子元素）</button>
<button id="btn12">empty() 删除div中子元素</button></br></br>
<button id="btn13">remove(".p2") 希望删除div中class=p2的子元素(但无法删除)</button></br></br>
<button id="btn14">通过选中所有p元素，删除class=p2的元素，变相实现删除</button>
<script>
$("#btn11").click(function(){
$("#div1").remove();
});
$("#btn12").click(function(){
$("#div1").empty();
});
$("#btn13").click(function(){
$("#div1").remove(".p2");
});
$("#btn14").click(function(){
$("p").remove(".p2");
});
</script>
实例代码已上传我的Gitee有需要的可以去下载
https://gitee.com/net_master/Ajax_Node/tree/master/jQuery
写给自己：通过对jQuery的学习可以帮助我们快速的熟悉js操作DOM文档的各类基础，函数库和框架对我们而以仅仅都只是工具而以，能够熟练掌握常见的运用，但手册内容还是要粗略的过一遍让自己产生一些印象，等需要使用的时候可以翻查手册，一定不要徘徊在同一个节点上，要一直向前，切不可钻牛角尖。
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.8.6 at Great 108
- 点赞
- 收藏
- 关注作者
评论（0）