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中大部分对文档的处理方法，敬请笑纳，有疑问的萍子随时恭候，呼呼~加油！