jQuery学习之八---文档处理

Hi~ o(￣▽￣)ブ，大家好，好久不见啊，萍子近两个星期专心做了一个前后台合作的电商网站的项目，好累啊，但是又有点想念CSDN上的你们了，所以萍子马上马立刻立的就过来了，嘿嘿~有没有一点小感动啊。

好了，不扯闲篇了，我们今天来一起看看jQuery文档处理的内容吧，虽然项目期大部分用了jq的知识点，但是咋也老感觉一边学习一边忘呢，好尴尬啊真的是，唉~

内部插入

1、append[content/fn]

向每个匹配的元素内部追加内容。这个方法与js的DOM操作中的appendChild方法类似。

*注意：是在内部追加哦，也就是说插入到元素最后方的位置。

参数分析：

content：要追加到目标中的内容

function（index，html）：这个函数会返回一个字符串，用于追加到每一个匹配元素的里边。接收两个参数，index为对象在这个集合中的索引值，html为这个对象原先的html值。

<div>Hello,</div>
$("div").append("<p>everyone</p>")；
结果：<div>Hello,<p>everyone</p></div>

2、appendTo[content]

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

注意：这个也是追加哦，也是加在元素内部最后。

实际上，这个方法的使用颠倒了append的操作。$(A).append(B)，是把B添加到A的最后方，而appendTo，是把前者插入到后者内部最后

参数分析：

content：用于被追加的内容

<p>哈哈</p>
<div>啦啦啦</div>
$("p").appendTo("div");
结果：<div>啦啦啦<p>哈哈</p></div>

以上两种方法是把内容添加到元素内部的最后方。

3、prepend[content/fn]

向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。

参数分析：

content：要插入到目标元素内部前端的内容

function（index，html）：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

<div>Hello,</div>
$("div").prepend("<p>everyone</p>")；
结果：<div><p>everyone</p>Hello,</div>

4、prependTo[content]

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

实际上，这个方法的使用颠倒了prepend的操作。$(A).append(B)，是把B添加到A的最前方，而appendTo，是把前者插入到后者内部最前

参数分析：

content：用于匹配元素的jQuery表达式

<p>哈哈</p>
<div>啦啦啦</div>
$("p").prependTo("div");
结果：<div><p>哈哈</p>啦啦啦</div>

以上两种方法是把content添加到匹配元素的最前方。

外部插入

5、after[content/fn]

在每个匹配元素之后插入内容

参数分析：

content：插入到每个目标后的内容

function：函数必须返回一个html字符串

<div>Hello,</div>
$("div").after("<p>everyone</p>")；
结果：<div>Hello,</div><p>everyone</p>

6、before[content/fn]

在每个匹配的元素之前插入内容。

参数分析：

content：插入到每个目标后的内容

function：函数必须返回一个html字符串

<div>Hello,</div>
$("div").before("<p>everyone</p>")；
结果：<p>everyone</p><div>Hello,</div>

7、insertAfter[content]

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

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

参数分析：

content：用于匹配元素的jQuery表达式

<div>Hello,</div>
$("div").insertAfter("<p>everyone</p>")；
结果：<p>everyone</p><div>Hello,</div>

8、insertBefore[content]

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

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

参数分析：

content：用于匹配元素的jQuery表达式

<div>Hello,</div>
$("div").insertBefore("<p>everyone</p>")；
结果：<div>Hello,</div><p>everyone</p>

包裹

9、wrap[html/ele/fn]

把所以匹配的元素用其他元素的结构化标记包裹起来

需要注意的是：当被匹配的元素中包含文本时，无法使用这个函数，因此要添加文本应该在包裹完成之后再进行添加。

参数分析：

html：HTML标记代码字符串，用于动态生成元素并包裹目标元素

elem：用于包裹目标元素的DOM元素

fn：生成包裹结构的函数

用一个新建div包裹所有的p标签
$("p").wrap("<div></div>");

用id名为content的div包裹p标签
$("p").wrap(document.getElementById("content"));

10、unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

把一组用div包裹的p标签移除
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
$("p").unwrap()
结果：
<p>Hello</p>
<p>cruel</p>
<p>World</p>

替换

11、replaceWith[content/fn]

将所有匹配的元素替换成指定的html或dom元素

参数分析：

content：用于将匹配元素替换掉的内容。

fn：返回html字符串，用来替换的内容。

这个函数需要注意的是，匹配到的元素是移动过来替换，而不是复制一份过来替换。也就是说替换的移动过来替换了被替换的，结果是替换的在被替换的位置上存在，别替换的已经不在了，不在了~~~

比如：

<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
$('.third').replaceWith($('.first'));
结果：
<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>

12、replaceAll[selector]

用匹配的元素替换掉所有 selector匹配到的元素。

参数分析：

selector：用于查找所要被替换的元素

<div><p>哈哈</p></div>
$("<span>嘿嘿</span>").replaceAll("p");
结果：<div><span>嘿嘿</span></div>

删除

13、empty（）

删除匹配的元素集合中所有的子节点

把所有div的子节点删掉
<div><p>哈哈</p></div>
$("div").empty();
结果：<div></div>

14、remove[expr]

从DOM中删除所有匹配的元素

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

参数分析：

expr：用于筛选元素的jQuery表达式

<p class="hello">Hello</p> how are <p>you?</p>
从DOM中把所有段落删掉
$("p").remove();
结果：how are

从DOM中删除带有hello类的段落
$("p").remove(".hello");
结果：how are <p>you?</p>

15、detach[expr]

从DOM中删除所有匹配的元素。

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

参数分析：

expr：用于筛选元素的jQuery表达式

例子同上。

复制

16、clone（）

克隆匹配的DOM元素并且选中这些克隆的副本，进行操作

克隆所有的span标签，并且选中这些克隆副本，然后将他们插入到所有段落后方
<span>哈哈</span><p>嘿嘿</p>
$("span").clone().appendTo("p");
结果：<span>哈哈</span><p>嘿嘿<span>哈哈</span></p>

好了，以上就是jQuery中大部分对文档的处理方法，敬请笑纳，有疑问的萍子随时恭候，呼呼~加油！