关于jQuery操作DOM的方法小结

一、DOM节点的创建

常见的就是直接把这个节点的结构通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")；

例如:$("<div> class='right' ><div class='aaron'>可以写文本</div></div>");

二、DOM节点的插入

1，内部插入 append（）与appendTo（）

append：这个操作与对指定的元素执行原生的appendChild方法，将它们们添加到文档中的情况类似。

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

换句话说，append()前面是要选择的对象，后面是要在对象内插入的元素内容，appendTo()前面是要插入的元素内容，而后面是要选择的对象；两个方法功能相同，只是语法、内容和目标的位置不同。

2，内部插入prepend()与prependTo();

prepend,向每个匹配的元素内部前置内容；

prependTo把所有匹配的元素前置到另一个指定的元素集合中；

prepend()方法将指定元素插入到匹配元素里作为他的第一子元素，（如果要作为最后一个子元素就用append()）;

prepend()和prependTo（）实现相同的功能，主要是不同的语法，插入的内容和目标的位置不同

对于prepend而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数；

而prependTo方法正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，带插入内容的容器作为参数；

总结下内部操作的四个方法的区别：

⑴，append向每个匹配的元素内部追加内容；

⑵，prepend想每个匹配的元素内部前置内容；

⑶，appendTo把所有匹配的元素追加到另一个指定元素的集合中

⑷，prependTo把所有匹配的元素前置到另一个指定的元素集合中

3，外部插入after()和before()

.after(要插入的内容) 方法在匹配集合的每个元素后面插入参数所指定的内容，作为其兄弟节点；

.before(要插入的内容) 方法据参数设定，在匹配元素的前面插入内容；

⑴ before和after都是用来对相对选中元素外部增加相邻的的兄弟节点；

⑵ 2个方法都是可以接受 HTML字符串，DOM元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面；

⑶ 2个方法都可以支持多个参数传递after(div1,div2....);

注意的点：

① after向元素的后面添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入；

② before向元素的前面添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入；

四，DOM节点的删除

⑴，empty()的基本用法

"empty"，顾名思义，清空方法，但是与删除节点又有点不一样，因为它只移除了指定元素中的所有子节点；这个方法不仅移除子元素（和其他后代元素），同样的移除元素里面的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

⑵，remove()的有参数法和无参数法

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件以及与该元素相关的jquery数据；

通过remove方法移除div以及其内部所有的元素，remove内部会自动操作事件销毁方法，所以使用起来非常方便；

remove表达式参数：

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点，我们可以通过$()选择一组相同的元素，然后通过remove()传递筛选的规则，从而这样处理；

关于写法：

可以是 $("p").remove(".contains('3')");

// filter() 筛选器;

也可以是 $("p").filter("contains('3')").remove();

还可以是 $("p:contains('3')").remove();

三中方式处理的结果是一样的，不过处理的方式不一样；

⑶，empty()和remove()的区别

empty()方法，

严格的讲，该方法并不是删除节点，而是清空节点，他能清空元素中的所有后代节点；

empty不能删除自己本身这个节点；

remove方法

该节点与该节点所包含的所有后代节点将同时被删除

提供传递一个筛选的表达式，用来指定删除选中和集中的元素；

（通俗讲，empty是子自宫！remove是自杀！）

⑷，保留数据的删除操作detach()

如果我们希望临时删除页面上的节点，但又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法处理；detach从字面意思就很好理解，让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

这个方法不会把匹配的元素从jquery对象中删除，因而可以在将来再使用这些皮匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

需要特别注意的是，detach方法是jquery特有的，所以它只能处理通过jquery的方法绑定的事件或者数据；

⑸，detach()和remove()的区别

remove：移除节点

无参数，移除自身整个节点以及节点的内容的所有节点，包括节点上事件与数据；

有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据；

detach：移除节点

移除的处理与remove一致；

与remove()不同的是，所有绑定的事件、附加的数据都会保留下来

五，DOM节点的复制与替换

1， clone()方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的处理，我们需要通过clone（true）传递一个布尔值true用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了；

例如：HTML部分，

javaScript部分

$("div").on('click',function(){//执行操作})；

//clone处理一

$("div").clone() //只是克隆了结构，事件丢失

//clone处理二

$("div").clone(true) //结构、事件与数据都克隆

使用上就是这么简单，实用克隆的我们需要额外知道的细节：

⑴clone（）方法时，在将它插入到文档之前，我们可以修改克隆后的元素或内容，

例如：$("div").clone().css('color','red');

⑵通过传递true，将所绑定在原始元素上的事件处理函数复制到克隆元素上；

⑶clone（）方法是jquery扩展的，只能处理通过jquery绑定的事件与数据；

⑷元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始数据元素共享。深复制的所有数据，需要手动复制每一个；

2，replaceWith()和replaceAll()

replaceWith（）方法用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合；简单地说，用$()选择节点A，调用replaceWith方法，传入一个新的内容B（html字符串，DOM元素，活着jquery对象）用来替换选中的节点A；

例如：

<div>

</div>

//替换第二段的节点与内容

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段内容</a>');

//通过jquery筛选出第二个p元素，调用replaceWith进行替换，结果如下；

<div>

<a style="color:red">替换第二段内容</a>

</div>

replaceAll():用集合的匹配元素替换每个目标元素，replaceAll和replaceWith功能类似，但是目标和源相反；

两个方法会删除与节点相关联的所有数据和事件处理程序；

3，DOM包裹wrap()方法

wrap()：在集合中匹配的每一个元素周围包裹一个HTML结构；

$('p').wrap("<div></div>")

//执行结果

wrap(function):一个回调函数，返回用于包裹匹配元素的HTML内容或jquery对象；

使用后的效果与直接传递参数是一样的，只不过可以把代码写带函数体内部，写法不同而已。

4，DOM包裹unwrap()方法

与wrap方法相反，将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置；

5，DOM包裹wrapAll（）

给集合中皮匹配的元素增加一个外面包裹的HTML结构，可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层但是最内层只能有一个元素。所有匹配的元素将被当做是一个整体，在这个整体的外部用来指定的HTML结构进行包裹。

6，DOM包裹wrapInner()

给集合中匹配的元素的内部，增加包裹的HTML结构；

例如：

//给所有的p元素增加一个div包裹

$('p').wrapInner('<div></div>');

//最后的结构，匹配的p元素被div给包裹了

<p>

</p>

<p>

</p>

.wrapInner(function)：允许我们用一个callback函数做参考，

每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jquery对象，或者HTML片段，用来包住匹配元素的内容

注意：

当通过一个选择器字符串传递给wrapInner（）函数，其参数应该是格式正确的HTML，并且HTML标签应该是被正确关闭的。

我的jQuery之路(笔记)--6相关推荐

python之路day5_Python语言之python之路笔记day19
本文主要向大家介绍了Python语言之python之路笔记day19,通过具体的内容向大家展示,希望对大家学习Python语言有所帮助. 一.Django请求生命周期对于所有的web框架来说本质就是 ...
jQuery开发经验实例笔记
jQuery开发经验实例笔记 jQuery获取文件选择输入框的扩展名 var file=$("input[name='file']").val() var filename=fil ...
财务自由之路--笔记
财务自由之路--笔记一.基本原则 1.财务问题会给生活其他方面投下阴影. 2.责任: 1)如果是他人的错误导致了自己的不幸,注意要对自己的反应负责.responsibility 2)逃避责任使人沦为 ...
硬件工程师炼成之路笔记
最近很忙,所以研究技术的时间少了,也没怎么发干货文章,抱歉抱歉.不过我也不是一点事情都没干,我把写的文章整理成为一个册子,方面查阅的那种,可以理解为文章合集吧,是一个pdf文档. 当然,并不是所有的文 ...
3台云腾讯云开始hadoop学习之路笔记二
3台云腾讯云开始hadoop学习之路笔记二(接上) 大三党开始学习hadoop之路了,菜鸟学习hadoop,有啥错误请大佬指教.由于自己电脑配置不够,只能买3台腾讯云服务器来学习了.以下笔记都是记录我 ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
我的jQuery学习之路(笔记)——四
.css()与.addClass()设置样式的区别对于样式的设置,有css和addClass方法,那么二者的区别是什么呢. 1,可维护性 addClass的本质是通过定义个class类的样式规则,给 ...
jQuery插件开发学习笔记
今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载.笔者今天详细 ...
jquery mobile开发笔记之Ajax提交数据
这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对于我来说学习这个东西感觉挺简单的,很容易上手.Jqm的的语法和jquery其实是一样的, ...

我的jQuery之路(笔记)--6

关于jQuery操作DOM的方法小结

我的jQuery之路(笔记)--6相关推荐

最新文章

热门文章