【jQuery使用手册】五：文档处理

　　　　五：文档处理

　　　　append(content)　　　　返回值：jQuery

　　　　向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。参数content：要追加到目标中的内容。示例：向所有段落中追加一些HMTL标记。　　　　

1  HTML代码：
2           < p > I would like to say: </ p >
3  jQuery代码：
4          $("p").append(" < b > Hello </ b > ");
5  结果：
6          [ < p > I would like to say: < b > Hello </ b ></ p > ]

 　　　　append(function(index,html))　　　　返回值：jQuery

　　　　jQuery1.4新增。向每个匹配的元素内部追加内容。参数function：返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先得html值。

　　　　appendTo(content)　　　　返回值：jQuery

　　　　把所有匹配的元素追加到另一个指定的元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作。示例：把所有段落追加到ID值为foo的元素中。　　　　

代码

1  HTML代码：
2           < p > I would like to say: </ p >
3          < div ></ div >< div ></ div >
4  jQuery代码：
5          $("p").appendTo("div");
6  结果：
7           < div >< p > I would like to say: </ p ></ div >
8          < div >< p > I would like to say: </ p ></ div >

 　　　　示例：把新建的段落追加到div中并加上一个class。　　　　

代码

1  HTML代码:
2           < div ></ div >< div ></ div >
3  jQuery代码：
4           $(" < p /> ").appendTo("div").addClass("test").end().addClass("test2");
5  结果：
6            < div >< p  class ="test test2" ></ p ></ div >
7           < div >< p  class ="test" ></ p ></ div >

 　　　　prepend(content)　　　　返回值：jQuery

　　　　  向每个匹配的元素内部添加前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。示例：向所有段落中前置一些HTML标记代码。　　　　 

1  HTML代码：
2           < p > I would like to say: </ p >
3  jQuery代码：
4          $("p").prepend(" < b > Hello </ b > ");
5  结果：
6          [ < p >< b > Hello </ b > I would like to say: </ p > ]

  　　　　prepend(function(index,html))　　　　返回值：jQuery

　　　　 jQuery1.4新增。向每个匹配的元素内部最前面追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。参数function：返回一个HTML字符串，用于追加到每个匹配元素里。

　　　　prependTo(content)　　　　返回值：jQuery

　　　　 把所有匹配的元素前置到另一个匹配的元素中。示例：把所有段落追加到ID为foo的元素中。　　　　 

1  HTML代码：
2           < p > I would like to say: </ p >< div  id ="foo" ></ div >
3  jQuery代码：
4          $("p").prependTo("#foo");
5  结果：
6           < div  id ="foo" >< p > I would like to say: </ p ></ div >

   　　　after(content)　　　　返回值：jQuery

　　　　 在每个匹配元素之后插入内容，与append区别是该函数在匹配元素的外部插入。示例：在所有段落之后插入一些HTML标记代码。　　　　

1  HTML代码：
2           < p > I would like to say: </ p >
3  jQuery代码：
4          $("p").after(" < b > Hello </ b > ");
5  结果：
6           < p > I would like to say: </ p >< b > Hello </ b >

 　　　  示例：在所有段落之后插入一个DOM元素。　　　　 

1  HTML代码：
2           < b  id ="foo" > Hello </ b >< p > I would like to say: </ p >
3  jQuery代码：
4          $("p").after($("#foo")[0]);
5  结果：
6           < p > I would like to say: </ o >< b  id ="foo" > Hello </ b >

 　　　　示例：在所有段落后插入一个jQuery对象。　　　　

1  HTML代码：
2           < b > Hello </ b >< p > I would like to say: </ p >
3  jQuery代码：
4          $("p").after($("b"));
5  结果：
6           < p > I would like to say: </ p >< b > Hello </ b >

 　　　　after(function)　　　　返回值：jQuery

　　　　 向每个匹配元素之后插入内容。jQuery1.4新增。函数必须返回一个HTML字符串。

　　　　before(content)　　　　返回值：jQuery

　　　　 向每个匹配元素之前插入内容。示例：在所有段落之前插入一些HTML教程标记代码。　　　　

1  HTML代码：
2           < p > I would like to say: </ p >
3  jQuery代码：
4          $("p").before(" < b > Hello </ b > ");
5  结果：
6           < b > Hello </ b >< p > I would liek to say: </ p >

 　　　　before(function)　　　　返回值：jQuery

　　　　 向每个匹配元素之前插入内容。jQuery1.4新增，函数必须返回一个HTML字符串。

　　　　insertAfter(content)　　　　返回值：jQuery

　　　　 把所有匹配的元素插入到另一个指定元素集合的后面。实际上，这个方法颠倒了$(A).after(B)的操作，把A插入到B后面。

　　　　 示例：把所有段落插入到一个元素之后。与$("#foo").after("p")相同。　　　　  

1  HTML代码：
2           < p > I would like to say: </ p >< div  id ="foo" > Hello </ div >
3  jQuery代码：
4          $("p").insertAfter("#foo");
5  结果：
6           < div  id ="foo" > Hello </ div >< p > I would like to say: </ p >

 　　　　insertBefore(content)　　　　返回值：jQuery

　　　　 把所有匹配的元素插入到另一个指定的元素集合的前面。实际上，这个方法颠倒了$(A).before(B)的操作，把A插到B前面。

　　　　 示例：把所有段落插入到一个元素之前。与$("#foo").before("p")相同。　　　　　

1  HTML代码：
2           < div  id ="foo" > Hello </ div >< p > I would like to say: </ p >
3  jQuery代码：
4          $("p").insertBefore("#foo");
5  结果:
6          < p > I would like to say: </ p >< div  id ="foo" > Hello </ div >

 　　　　wrap(html)　　　　返回值：jQuery

　　　　把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的)，并且它的代码结构中找到最上层的祖先元素(这个元素就是包裹元素)。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再添加。示例：把所有的段落用一个新的div包裹起来。　　　　　　

1  HTML代码：
2           < p > Test Paragraph. </ p >
3  jQuery代码：
4          $("p").warp(" < div  class ='warp' ></ div > ");
5  结果：
6           < div  class ="warp" >< p > Test Paragraph. </ p ></ div >

 　　　　wrap(elem)　　　　返回值：jQuery

　　　　 把所有匹配的元素用其他元素的结构化标记包装起来。示例：用ID为"content"的div将每一个段落包裹起来。　　　　

代码

1  HTML代码：
2           < p > Test Paragraph. </ p >< div  id ="content" ></ div >
3  jQuery代码：
4          $("p").wrap(document.getElementById("content"));
5  结果：
6           < div  id ="content" >< p > Test Paragraph. </ p >< div >< div  id ="content" ></ div >

  　　　　wrap(fn)　　　　返回值：jQuery

　　　　  把所有匹配的元素用其他元素的结构化标记包装起来。示例：用原先div的内容作为新div的class，并将每一个元素包裹起来。　　　　 

代码

 1  HTML代码：
 2           < div  class ="container" >
 3           < div  class ="inner" > Hello </ div >
 4           < div  class ="inner" > Goodbye </ div >
 5          </ div >
 6  jQuery代码：
 7          $(".inner").wrap(function(){
 8              return ' < div  class ="'+$(this).text()+'" /> ';
 9          });
10  结果：
11           < div  class ="container" >
12           < div  class ="hello" >
13            < div  class ="inner" > Hello </ div >
14           </ div >
15           < div  class ="Googbye" >
16            < div  class ="inner" > Goodbye </ div >
17           </ div >
18          </ div >

 　　　　unwrap()　　　　返回值：jQuery

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

1  HTML代码：
2           < div >< p > Hello </ p >< p > cruel </ p >< p > World </ p ></ div >
3  jQuery代码：
4          $("p").unwrap();
5  结果：
6           < p > Hello </ p >< p > cruel </ p >< p > World </ p >

 　　　　wrapAll(html)　　　　返回值：jQuery

　　　　 将所有匹配的元素用单个元素包裹起来。这于'.wrap()'是不同的，'wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏文档的原始品质。示例：用一个生成的div将所有段落包裹起来。　　　　 

1  HTML代码：
2           < p > Hello </ p >< p > cruel </ p >< p > World </ p >
3  jQuery代码：
4          $("p").wrapAll(" < div ></ div > ");
5  结果：
6           < div >< p > Hello </ p >< p > cruel </ p >< p > World </ p ></ div >

   　　　wrapAll(elem)　　　　返回值：jQuery

　　　　 将所有匹配的元素用单个元素包裹起来。这于'.wrap()'是不同的，'.wrap()'为每一个匹配的元素都包裹一次。示例：用一个生成的div将所有段落包裹起来。　　　　

1  HTML代码：
2           < p > Hello </ p >< p > cruel </ p >< p > World </ p >
3  jQuery代码；
4          $("p").wrapAll(document.createElement("div"));
5  结果：
6           < div >< p > Hello </ p >< p > cruel </ p >< p > World </ p ></ div >

 　　　　wrapInner(html)　　　　返回值：jQuery

　　　　 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结果包裹起来。示例：将所有段落内的每个子内容加粗。　　　　

1  HTML代码：
2           < p > Hello </ p >< p > cruel </ p >< p > World </ p >
3  jQuery代码：
4          $("p").wrapInner(" < b ></ b > ");
5  结果：
6           < p >< b > Hello </ b ></ p >< p >< b > cruel </ b ></ p >< p >< b > World </ b ></ p >

　　　　wrapInner(elem)　　　　返回值：jQuery

　　　　 将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来。示例：将所有段落内的每个子内容加粗。

1  HTML代码：
2           < p > Hello </ p >< p > cruel </ p >< p > World </ p >
3  jQuery代码:
4         $("p").wrapInner(document.createElement("b"));
5  结果：
6           < p >< b > Hello </ b ></ p >< p >< b > cruel </ b ></ p >< p >< b > World </ b ></ p >

 　　　　wrapInner(fn)　　　　返回值：jQuery

　　　　 将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来。示例：用原先div的内容作为新div的class，并将每一个元素包裹起来。　　　　

代码

 1  HTML代码：
 2           < div  class ="container" >
 3             < div  class ="inner" > Hello </ div >
 4             < div  class ="inner" > Goodbye </ div >
 5           </ div >
 6  jQuery代码：
 7          $(".inner").wrapInner(function(){
 8          return ' < div  class ="'+$(this).text()+'" " /> ';
 9         });
10  结果：
11           < div  class ="container" >
12             < div  class ="inner" >
13               < div  class ="Hello" > Hello </ div >
14             </ div >         
15             < div  class ="inner" >
16               < div  class ="Goodbye" > Goodbye </ div >
17             </ div >
18           </ div >

　　　　replaceWith(content)　　　　　　返回值：jQuery

　　　　 将所有匹配元素替换成指定的HTML或DOM元素。参数content：可为String，Element，jQuery，Function，如果为Function则必须返回HTML字符串。

　　　　 示例：把所有段落标记替换成加粗的标记。　　　　

1  HTML代码：
2           < p > Hello </ p >< p > cruel </ p >< p > World </ p >
3  jQuery代码：
4          $("p").replaceWith(" < b > Paragraph. </ b > ");
5  结果：
6           < b > Paragraph. </ b >< b > Paragraph. </ b >< b > Paragraph. </ b >

 　　　　示例：用第一段替换第三段，它是移动目标位置来替换而不是复制一份。

代码

 1  HTML代码：
 2           < div  class ="container" >
 3             < div  class ="inner first" > Hello </ div >
 4             < div  class ="inner second" > And </ div >
 5             < div  class ="inner third" > Goodbye </ div >
 6           </ div >
 7  jQuery代码：
 8          $(".third").replaceWithd($('.first'));
 9  结果：
10           < div  class ="container" >
11             < div  class ="inner second" > And </ div >
12             < div  class ="inner first" > Hello </ div >
13           </ div >

   　　　replaceAll(selector)　　　　返回值：jQuery

　　　　 用匹配的元素替换掉所有的selector匹配到的元素。示例：把所有的段落标记替换成加粗标记。　　　　

1  HTML代码：
2           < p > Hello </ p >< p > cruel </ p >< p > World </ p >
3  jQuery代码；
4          $(" < b > Paragraph. </ b > ").replaceAll("p");
5  结果：
6           < b > Paragraph.  </ b >< b > Paragraph.  </ b >< b > Paragraph.  </ b >

 　　　　empty()　　　　返回值：jQuery

　　　　 删除匹配元素集合中所有的子节点。示例：把所有段落的子元素(包括文本节点)删除。

1  HTML代码：
2           < p > Hello, < span > Person </ span >< a  href ="#" > and person </ a ></ p >
3  jQuery代码：
4          $("p").empty();
5  结果：
6           < p ></ p >

   　　　 remove([expr])　　　　返回值：jQuery

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

1  HTML代码：
2           < p > Hello </ p >  how are  < p > you? </ p >
3  jQuery代码：
4          $("p").remove();
5  结果：
6           how are 

  　　　示例：从DOM中把带有hello类的段落删除。

1  HTML代码：
2           < p  class ="hello" > Hello </ p >  how are  < p > you> </ p >
3  jQuery代码：
4          $("p").remove(".hello");
5  结果：
6          how are  < p > you? </ p >

　　　　detach([expr])　　　　返回值：jQuery

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

1  HTML代码：
2           < p  class ="hello" > Hello </ p >  how are  < p > you? </ p >
3  jQuery代码：
4          $("p").detach(".hello");
5  结果：
6          how are  < p > you? </ p >

 　　　　clone()　　　　返回值：jQuery

　　　　 克隆匹配的DOM元素并且选择这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

　　　　 示例：克隆所有b元素(并选中这些克隆的副本)，然后将它们前置到所有段落中。

1  HTML代码：
2           < b > Hello </ b >< p > ,how are you? </ p >
3  jQuery代码：
4          $("b").clone().prepentTo("p");
5  结果：
6           < b > Hello </ b >< p >< b > Hello </ b > ,how are you? </ p >

 　　　　clone(true)　　　　返回值：jQuery

　　　　 克隆元素以及其所有的事件处理并且选择克隆的副本。参数：设置为true以便复制元素的所有事件处理。

　　　　 示例：创建一个按钮，它可以复制自己，并且它的副本也有同样功能。

1  HTML代码：
2           < button > Clone Me! </ button >
3  jQuery代码：
4          $("button").click(function(){
5            $(this).clone(true).insertAfter(this);
6          });