jquery温故知新-文档处理篇

1.​​append(content|fn)​​​ 与 ​​prepend(content|fn)​​

• • 
    
• ​​append(content|fn)​​ 向每个匹配的元素内部追加内容。
  这个操作与对指定的元素执行​​appendChild​​方法，将它们添加到文档中的情况类似。
• ​​prepend(content|fn)​​ 向每个匹配的元素内部前置内容。
  这是向所有匹配元素内部的开始处插入内容的最佳方式。
  • 
    

参数

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

2.​​appendTo(content)​​​ 与 ​​prependTo(content)​​

• • 
    
• ​​appendTo(content)​​ 把所有匹配的元素追加到另一个指定的元素元素集合中。
  实际上，使用这个方法是颠倒了常规的​​$(A).append(B)​​的操作，即不是把​​B​​追加到​​A​​中，而是把​​A​​追加到​​B​​中。
• ​​prependTo(content)​​ 把所有匹配的元素前置到另一个、指定的元素元素集合中。
  实际上，使用这个方法是颠倒了常规的​​$(A).prepend(B)​​的操作，即不是把​​B​​前置到​​A​​中，而是把​​A​​前置到​​B​​中。
  • 
    

参数

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

3.​​after(content|fn)​​​ 与 ​​before(content|fn)​​

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

参数

• • 
    
• content 插入内容
• function 函数必须返回一个html字符串。
  • 
    

4.​​insertAfter(content)​​​ 与 ​​insertBefore(content)​​

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

参数

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

5.​​wrap(html|element|fn)​​​、​​wrapAll(html|ele)​​​ 与 ​​wrapInner(htm|element|fnl)​​

• • 
    
• ​​wrap(html|element|fn)​​ 把每一个匹配的元素用一个HTML结构都包裹一次，存放于每一个匹配元素的包裹元素中。
• ​​wrapAll(html|ele)​​ 将所有匹配的元素用单个元素包裹起来，存放于第一个匹配元素的包裹元素中。
• ​​wrapInner(htm|element|fnl)​​ 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
  • 
    

参数

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

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

6.​​unwrap()​​

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

\\用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>

7.​​replaceWith(content|fn)​​​ 与 ​​replaceAll(selector)​​

• • 
    
• ​​replaceWith(content|fn)​​ 将所有匹配的元素替换成指定的HTML或DOM元素。
• ​​replaceAll(selector)​​​ 用匹配的元素替换掉所有 ​​selector​​匹配到的元素。
  • 
    

//把所有的段落标记替换成加粗的标记。
<p>Hello</p><p>cruel</p><p>World</p>

方法一：$("p").replaceWith("<b>Paragraph. </b>");
方法二：$("<b>Paragraph. </b>").replaceAll("p");

8.​​remove([expr])​​​ 与 ​​detach([expr])​​

• • 
    
• 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
• 区别

• • 
    
• ​​remove([expr])​​ 除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
• ​​detach([expr])​​ 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
  • 
    

参数

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

\\从DOM中把带有hello类的段落删除
<p class="hello">Hello</p> how are <p>you?</p>

$("p").remove(".hello");
结果:
how are <p>you?</p>

9.​​clone([Even[,deepEven]])​​

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

参数

Events 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

Events[,deepEvents]
1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

\\克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

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

$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>

\\创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
<button>Clone Me!</button>

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});