技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(1)

网友投稿 447 2022-05-29

在jQuery入门篇中我们了解了jQuery的基本使用,对jQuery语法、选择器、入口函数、鼠标事件以DOM文档获取与设置等基本操作,对DOM文档操作而言,获取和设置是较为基础的,如果对一个已经存在的DOM文档中的

  • 进行调整节点内容,直接通过获取和设置这两个方法操作DOM还是很不方便的。

    本篇将分享jQuery对DOM文档的一些进阶操作,如何操作DOM文档中元素的添加和删除。

    一、添加元素

    JQuery中提供了四方法添加元素

    append() 在元素内部结尾插入

    prepend() 在元素开内部头插入

    after() 在元素之后

    before() 在元素之前插入

    知识点

    append()和perend() 是在被选中元素内部开头或结尾插入新元素

    after()和before() 是在选被中元素之前或之后插入新元素

    append 和 prepend 是在被选中元素内部开头或结尾插入新元素

                

  • 电脑
  •             
  • 手机
  •             
  • 平板
  •             
  • 服务器
  •         
        append 结尾插入         prepend 开头插入         

我是一个无情的文本

        append 结尾插入         prepend 开头插入           

通过append 和 prepend 向body 批量添加元素

body.append()         body.prepend()           

after 和 before 是在被选中元素之前或之后插入新元素

我是第二名_p标签
        after()元素之后插入新元素         before()元素之前插入新元素         

向被选中元素 之前或之后 批量添加元素

我就是那个被选中的

        after()元素之后批量插入新元素         before()元素之前批量插入新元素         

二、删除元素

jQuery中提供了两个方法删除元素

remove() 删除被选中的元素(含所有子元素)

empty() 从被选的元素中删除子元素

知识点

remove() 方法可以接受一个参数,允许筛选指定的元素进行删除(通过选择器),但一定要注意它只能作用于同级,不能直接作用于子元素

$(选择符) 语法返回结果是一个元素列表,而被选中元素中如果有子元素是不包含在这个列表中的,所以当你remove(子元素)时因为列表中没有包含子元素所以删除是无效的,也是为什么remove()只能用于同级元素筛选删除的原因。

remove和empty 进行元素删除

empty()从被选的元素中删除子元素

                     

我是老大

            我是老二(class=p2)

            我是老三(class=p2)

            

我是老四

            

我是老五

        

        remove() 删除div元素(含子元素)         empty() 删除div中子元素

        remove(".p2") 希望删除div中class=p2的子元素(但无法删除)

        通过选中所有p元素,删除class=p2的元素,变相实现删除           

实例代码已上传我的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小时内删除侵权内容。

上一篇:你等待的Python Qt GUI来啦!顺带送你点干货:从Qt C++类库到PyQt5
下一篇:Web前端面试真题CSS系列---带详解!
相关文章