jQuery中的文档处理（五）

1. append(content|fn), 向每个匹配的元素内部追加内容

在内部结尾添加。

参数说明：

• content：String, Element, jQuery，要追加到目标中的内容
• function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

$("p").append("<b>Hello</b>");

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

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

参数说明：

• content：String，用于被追加的内容

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法.

<p>I would like to say: </p>
<div></div><div></div>

$("p").appendTo("div");

//结果：
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

<div></div><div></div>

$("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

//结果<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

3. prepend(content), 向每个匹配的元素内部前置内容

参数说明：

• content：String, Element, jQuery，要插入到目标元素内部前端的内容
• function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

$("p").prepend("<b>Hello</b>");

4. prependTo(content), 把所有匹配的元素前置到另一个、指定的元素元素集合中

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

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

参数说明：

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

$("p").prependTo("#foo");

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

参数说明：

• content：String, Element, jQuery，插入到每个目标后的内容
• function(index, html)：函数必须返回一个html字符串

<p>I would like to say: </p>

$("p").after("<b>Hello</b>");

//结果
<p>I would like to say: </p><b>Hello</b>

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

参数说明：

• content：String, Element, jQuery，插入到每个目标前的内容
• function(index, html)：函数必须返回一个html字符串

<p>I would like to say: </p>

$("p").before("<b>Hello</b>");

//结果
<b>Hello</b><p>I would like to say: </p> 

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

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

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

参数说明：

• content：String

<p>I would like to say: </p><div id="foo">Hello</div>

$("p").insertAfter("#foo");

//结果
<div id="foo">Hello</div><p>I would like to say: </p>

8. insertBefore(content), 把所有匹配的元素插入到另一个、指定的元素元素集合的前面

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

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

参数说明：

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

$("p").insertBefore("#foo");

9. wrap(html|element|fn), 把所有匹配的元素用其他元素的结构化标记包裹起来

参数说明：

• html：String, HTML标记代码字符串，用于动态生成元素并包裹目标元素
• element：用于包装目标元素的DOM元素
• fn：Function, 生成包裹结构的一个函数

//把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");

10. unwrap(), 将移出元素的父元素, 能快速取消 .wrap()方法的效果

//用ID是"content"的div将每一个段落包裹起来

<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：String, Element, jQuery, Function，用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串
• fn：Function, 返回HTML字符串，用来替换的内容

<p>Hello</p><p>cruel</p><p>World</p>

$("p").replaceWith("<b>Paragraph. </b>");

//结果：
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

12. replaceAll(selector), 用匹配的元素替换掉所有 selector匹配到的元素

参数说明：

• selector：选择器, 用于查找所要被替换的元素

$("<b>Paragraph. </b>").replaceAll("p");

13. empty(), 删除匹配的元素集合中所有的子节点

$("p").empty();

14. remove([expr]), 从DOM中删除所有匹配的元素

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

参数说明：

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

<p>Hello</p> how are <p>you?</p>

$("p").remove();

//结果：how are

15. detach([expr]), 从DOM中删除所有匹配的元素

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

参数说明：

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

<p>Hello</p> how are <p>you?</p>

$("p").remove();

//结果：how are

16. clone([Even[,deepEven]]), 克隆匹配的DOM元素并且选中这些克隆的副本

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

参数说明：

• Events：Boolean, 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
• Events[,deepEvents]：Boolean,Boolean
  • 一个布尔值（true 或者 false）指示事件处理函数是否会被复制
  • 一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制

<b>Hello</b><p>, how are you?</p>

$("b").clone().prependTo("p");

//结果
<b>Hello</b><p><b>Hello</b>, how are you?</p>