【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(1)
在jQuery入门篇中我们了解了jQuery的基本使用，对jQuery语法、选择器、入口函数、鼠标事件以DOM文档获取与设置等基本操作，对DOM文档操作而言，获取和设置是较为基础的，如果对一个已经存在的DOM文档中的
- 进行调整节点内容，直接通过获取和设置这两个方法操作DOM还是很不方便的。
本篇将分享jQuery对DOM文档的一些进阶操作，如何操作DOM文档中元素的添加和删除。
一、添加元素
JQuery中提供了四方法添加元素
append() 在元素内部结尾插入
prepend() 在元素开内部头插入
after() 在元素之后
before() 在元素之前插入
知识点
append()和perend() 是在被选中元素内部开头或结尾插入新元素
after()和before() 是在选被中元素之前或之后插入新元素
append 和 prepend 是在被选中元素内部开头或结尾插入新元素
- 电脑
- 手机
- 平板
- 服务器
通过append 和 prepend 向body 批量添加元素
after 和 before 是在被选中元素之前或之后插入新元素
向被选中元素 之前或之后 批量添加元素
二、删除元素
jQuery中提供了两个方法删除元素
remove() 删除被选中的元素(含所有子元素)
empty() 从被选的元素中删除子元素
知识点
remove() 方法可以接受一个参数,允许筛选指定的元素进行删除(通过选择器),但一定要注意它只能作用于同级，不能直接作用于子元素
$(选择符) 语法返回结果是一个元素列表，而被选中元素中如果有子元素是不包含在这个列表中的，所以当你remove(子元素)时因为列表中没有包含子元素所以删除是无效的，也是为什么remove()只能用于同级元素筛选删除的原因。
remove和empty 进行元素删除
empty()从被选的元素中删除子元素
我是老大
我是老四
我是老五
实例代码已上传我的Gitee有需要的可以去下载
https://gitee.com/net_master/Ajax_Node/tree/master/jQuery
写给自己：通过对jQuery的学习可以帮助我们快速的熟悉js操作DOM文档的各类基础，函数库和框架对我们而以仅仅都只是工具而以，能够熟练掌握常见的运用，但手册内容还是要粗略的过一遍让自己产生一些印象，等需要使用的时候可以翻查手册，一定不要徘徊在同一个节点上，要一直向前，切不可钻牛角尖。
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.8.6 at Great 108
jQuery
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
