jQuery文档处理的一些方法

最新推荐文章于 2023-05-14 11:10:28 发布

柚稚鬼627

最新推荐文章于 2023-05-14 11:10:28 发布

阅读量163

点赞数

分类专栏： 11 22 33 文章标签： jquery

本文链接：https://blog.csdn.net/hp0524chl/article/details/116258824

版权

11 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中的DOM操作，包括append、prepend、insertAfter、before等方法用于元素的追加与插入，wrap、wrapAll、wrapInner用于元素包裹，replaceWith和replaceAll进行替换，以及empty和remove删除元素。此外，还讲解了clone方法用于元素克隆。这些方法在前端开发中经常使用，是理解jQuery核心功能的关键。

摘要由CSDN通过智能技术生成

jQuery文档处理方法

开发工具与关键技术： MVC
作者：曹海龙
撰写时间：2021/4/28
：：：样式有些简易
1、追加元素
：append（【要追加到目标的内容】）向每个匹配的元素内部追加内容
：appendTo（【用于被追加的内容】）把所有匹配的元素追加到另一个指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).append(B)的操作，既不是把B追加到A中，而是把A追加到B中。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429170506252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwMDUyNGNobA==,size_16,color_FFFFFF,t_70#pic_center)

2、插入元素
：prepend（【要插入到目标元素内部前端的内容】）向每个匹配的元素内部前置内容。
：prependTo（【用于匹配元素的jQuery表达式】）把所有匹配的元素前置到另一个、指定的元素元素集合中。
；after（【插入到每个目标后的内容】）在每个匹配的元素之后插入内容。
：before（）在每个匹配的元素之前插入内容。
：insertAfter（【用于匹配元素的jQuery表达式】）把所有匹配的元素插入到另一个，指定的元素集合的后面。
：insertBefore（）把所有匹配元素插入到另一个，指定的元素元素集合前面。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429170522358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwMDUyNGNobA==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429170522352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwMDUyNGNobA==,size_16,color_FFFFFF,t_70#pic_center)


3、包裹
：wrap（）把所有匹配的元素用其他元素的结构化标记包裹起来。
：wrapAll（）将所有匹配的元素用单个元素包裹起来
：wrapInner（）将每一个匹配的元素的子内容（包括文本节点）用一个HTML结构包裹起来
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429170534851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwMDUyNGNobA==,size_16,color_FFFFFF,t_70#pic_center)


4、替换、删除
：replaceWith（）将所有匹配的元素替换成指定的HTML或DOM元素。
：replaceAll（）用匹配的元素替换掉所有selector匹配到的元素。
：empty（）删除匹配的元素集合中所有的子节点。
：remove（）从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
：detach（）从DOM中删除所有匹配元素


5、复制元素、克隆元素
克隆元素：clone（）克隆匹配的DOM元素并且选中这些克隆的副本。
复制：创建一个按钮，他可以复制自己，并且他的副本也有同样功能

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429170544752.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwMDUyNGNobA==,size_16,color_FFFFFF,t_70#pic_center)