jQuery DOM节点

jQuery DOM节点

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年4月30日

jQuery文档处理DOM节点包括：内部插入、外部插入、包裹、替换、删除、复制这几种。每部分都有对应的函数值。

通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程，DOM节点的创建流程：创建节点（元素、属性、文本）à添加节点的属性à加到文档中

通过jQuery,可以很容易地添加新元素、新内容。append() 和
prepend() 方法能够通过参数接收无限数量的新元素

DOM内部插入函数：

append() 向每个匹配的元素内部追加内容。（在 xx 中追加（最后插入）yy）

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

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。（把yy追加（最后插入到）到xx中）

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

append() 前面是被插入的对象，后面是要在对象内插入的元素内容。

appendTo() 前面是要插入的元素内容，而后面是被插入的对象。

prepend() 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。（在 xx 内部的最前面插入 yy）

prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中。（把 yy 插入到
xx 内部的最前面）

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

prepend（）与prependTo（）这两种方法是在元素内部进行操作的方法中，除了在被选元素的结尾（仍然在内部）通过append（）与appendTo（）插入指定内容外，还可以在被选元素之前插入的两种方法。

下面这个例子主要是使用DOM内部插入函数中的 append() 函数、DOM复制函数中的clone() 函数 与DOM外部插入函数中的 insertAfter() 函数完成的。其中，DOM复制函数中的clone() 函数
与 DOM外部插入函数中的 insertAfter() 函数是组合使用的。

来看看它们的使用来看看它们的使用方法以及后面DOM其他函数的总结：案例代码见截图如下：

DOM外部插入函数：

after(content|fn):在每个匹配的元素之后插入内容。

参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。

. after()和.insertAfter() 实现同样的功能

before(content|fn):在每个匹配的元素之前插入内容。

参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。

before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置

insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

参数说明：content 用于匹配元素的jQuery表达式。

insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

参数说明：content 用于匹配元素的jQuery表达式。

通过jQuery,可以很容易地删除已有的HTML元素。如需删除元素和内容，一般可使用以下两个 jQuery 方法：remove() 删除被选元素（及子元素） empty() 从被选元素中删除子元素

DOM节点删除函数：

empty() 清空，删除匹配的元素集合中所有的子节点。

remove() 从DOM中删除所有匹配的元素，绑定的事件，附加的数据等都会被移除

要用到移除指定元素的时候，jQuery提供了empty()与remove()两个方法，两个都是删除元素，但是两者还是有区别

empty() 方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点，empty不能删除自己本身这个节点

remove() 方法该节点与该节点所包含的所有后代节点将同时被删除,提供传递一个筛选的表达式，删除指定合集中的元素

detach() 从DOM中删除所有匹配的元素，所有绑定的事件、附加的数据等都 会保留下来。在移除对象时，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

DOM节点包裹函数：

wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来。

unwrap() 这个方法将移出元素的父元素。

wrapAll() 将所有匹配的元素用单个元素包裹起来，会破坏原有文档结构

wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹
起来

DOM节点替换函数：

replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素。（即把所有x 替换成 y）

replaceAll()
用匹配的元素替换掉所有 selector匹配到的元素。（即用y替换所有x）

DOM节点复制函数：

clone() 克隆匹配的DOM元素并且选中这些克隆的副本。clone(boolean)，当为true时，不但复制元素本身，还会复制其绑定的事件 需求：当点击某标签或元素的时候，将其复制一份，添加为它的兄弟标签

每个函数都各有各的属性以及实现的功能，通过对DOM内部插入函数 append()、DOM复制函数 clone()
以及DOM外部插入函数 insertAfter() 完成的，来看看它们的使用方法以及后面DOM其他函数的DOM复制函数clone()的使用，实现了对整个文本和对单个元素的追加。实现的效果截图如下面所示，

点击第一个btn，追加整个seat部分按钮（即如图1所示左边的按钮），在整个容器内部追加整个seat部分（如图3，追加多一个如左边的小方块）。点击第二个btn，追加p标签按钮（图1右边按钮），会追加append()里面的文本内容（如图2、3所示seat部分的文字）。点击图中蓝色部分将整个文本以弹框模式输出（如图4），也就是说放在content容器的内容以及通过append（）追加的内容无论多少都会被输出，并且可以通过滚轮滚动查看输出的内容。最后点击确定，整个content容器将会被DOM复制函数中的 clone() 函数复制一份，添加为他的兄弟标签。并通过DOM外部插入函数中的
insertAfter() 函数将复制的那一份内容插入到指定的元素集合后面（效果如图5所示）。