JQuery學習4

1. 內部插入

append(content)： 向每个匹配的元素内部追加内容。
appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中。

prepend(content)：向每个匹配的元素内部 前面追加内容。
prependTo(content)：把所有匹配的元素前置到另一个、指定的元素元素集合中。

$("p").append("<b>Hello</b>");   
Result: <p>I would like to say: <b>Hello</b></p>
$("p").appendTo("div");
Result:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
$("p").prepend("<b>Hello</b>");
Result:<p><b>Hello</b>I would like to say: </p>

<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
$("p").prepend( $(".foo")[0] );
Result:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>

<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");
Result: <div id="foo"><p>I would like to say: </p></div>

2. 外部插入

after(content)：向每个匹配的元素之後追加。
before(content)：向每个匹配的元素之前追加。
insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

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

3. 替換

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

替換的規則是：移动到目标位置来替换，而不是复制一份来替换

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

4. 刪除

empty()：删除匹配的元素集合中所有的子节点。
detach([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来;   [expr]：用于筛选元素的jQuery表达式
remove([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除；[expr]：用于筛选元素的jQuery表达式

5. 複製

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

clone(true)：设置为true以便复制元素的所有事件处理

HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

6. 包裹

wrap(elem)  所有匹配的元素用elem的结构化标记包装起来。 elem:DOM元素
wrap(fn)：fn 生成包裹结构的一个函数。
wrap(html)：html：HTML标记代码字符串，用于动态生成元素并包裹目标元素。

HTML 代码:
<p>Test Paragraph.</p><div id="content"></div>
jQuery 代码:
$("p").wrap(document.getElementById('content'));
结果:
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>

HTML 代码:
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>

wrapInner(elem)：将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来。
wrapInner(fn)：fn 生成包裹结构的一个函数。
wrapInner(html)：html：HTML标记代码字符串，用于动态生成元素并包裹目标元素。

HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

wrapAll(elem)：将所有匹配的元素用单个元素包裹起来。'.wrap()'为每一个匹配的元素都包裹一次
wrapAll(html)：html：HTML标记代码字符串，用于动态生成元素并包裹目标元素。

HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapAll(document.createElement("div"));
结果:
<div><p>Hello</p><p>cruel</p><p>World</p></div>

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

HTML 代码:
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
jQuery 代码:
 $("p").unwrap()
结果:
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>