jQuery函数学习之三(DOM部分之Manipulation)

    开始dom元素节点的添加删除等操作部分的函数学习

函数：after(content)
功能：在每个匹配的元素后面添加html内容
返回：jQuery对象
参数：content (<Content>): Content to insert after each target. 
例子：
Inserts some HTML after all paragraphs.

jQuery Code
$("p").after("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<p>I would like to say: </p><b>Hello</b>

Inserts an Element after all paragraphs.

jQuery Code
$("p").after( $("#foo")[0] );
Before
<b id="foo">Hello</b><p>I would like to say: </p>
Result:
<p>I would like to say: </p><b id="foo">Hello</b>

Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

jQuery Code
$("p").after( $("b") );
Before
<b>Hello</b><p>I would like to say: </p>
Result:
<p>I would like to say: </p><b>Hello</b>

函数：append(content)
功能：在每个匹配元素之内添加content内容
返回：jQuery对象
参数：content (<Content>): Content to append to the target 
例子：
Appends some HTML to all paragraphs.

jQuery Code
$("p").append("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<p>I would like to say: <b>Hello</b></p>

Appends an Element to all paragraphs.

jQuery Code
$("p").append( $("#foo")[0] );
Before
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<p>I would like to say: <b id="foo">Hello</b></p>

Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

jQuery Code
$("p").append( $("b") );
Before
<p>I would like to say: </p><b>Hello</b>
Result:
<p>I would like to say: <b>Hello</b></p>

函数：appendTo(content)
功能：和append(content)类似，只不过是将前面匹配的元素添加到后面的元素内
返回：jQuery对象
参数：content (<Content>): Content to append to the selected element to. 
例子：
Appends all paragraphs to the element with the ID "foo"

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

函数：before(content)
功能：在匹配元素之前添加内容
返回：jQuery对象
参数：content (<Content>): Content to insert before each target. 
例子：
Inserts some HTML before all paragraphs.

jQuery Code
$("p").before("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<b>Hello</b><p>I would like to say: </p>

Inserts an Element before all paragraphs.

jQuery Code
$("p").before( $("#foo")[0] );
Before
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<b id="foo">Hello</b><p>I would like to say: </p>

Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

jQuery Code
$("p").before( $("b") );
Before
<p>I would like to say: </p><b>Hello</b>
Result:
<b>Hello</b><p>I would like to say: </p>

函数：clone(deep)
功能：克隆dom元素
返回：jQuery对象
参数：deep (Boolean): (可选的) 是否克隆子节点及其自身
例子：
Clones all b elements (and selects the clones) and prepends them to all paragraphs.

jQuery Code
$("b").clone().prependTo("p");
Before
<b>Hello</b><p>, how are you?</p>
Result:
<b>Hello</b><p><b>Hello</b>, how are you?</p>

函数：empty()
功能：移除匹配元素的子节点
返回：jQuery对象
例子：
jQuery Code
$("p").empty()
Before
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
Result:
[ <p></p>

函数：insertAfter(content)
功能：将匹配元素插入到content插入到之后
返回：jQuery对象
参数：Content to insert the selected element after
例子：
jQuery Code
$("p").insertAfter("#foo");
Before
<p>I would like to say: </p><div id="foo">Hello</div>
Result:
<div id="foo">Hello</div><p>I would like to say: </p>

函数：insertBefore(content)
功能：将匹配元素插入到content插入到之前
返回：jQuery对象
参数：Content to insert the selected element before.
例子：
jQuery Code
$("p").insertBefore("#foo");
Before
<div id="foo">Hello</div><p>I would like to say: </p>
Result:
<p>I would like to say: </p><div id="foo">Hello</div>

函数：prepend(content)
功能：与append相反，append是添加到匹配元素子节点之后，prepend是添加到匹配元素子节点之前
返回：jQuery对象
参数： Content to prepend to the target. 
例子：
jQuery Code
$("p").prepend("<b>Hello</b>");
Before
<p>I would like to say: </p>
Result:
<p><b>Hello</b>I would like to say: </p>

jQuery Code
$("p").prepend( $("#foo")[0] );
Before
<p>I would like to say: </p><b id="foo">Hello</b>
Result:
<p><b id="foo">Hello</b>I would like to say: </p>

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

函数：prependTo(content)
功能：将前面元素添加到后面元素子节点的前面
返回：jQuery对象
参数：content (<Content>): Content to prepend to the selected element to. 
例子：
jQuery Code
$("p").prependTo("#foo");
Before
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
Result:
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>

函数：remove(expr)
功能：移除匹配元素
功能：jQuery对象
参数：expr (String): (optional) A jQuery expression to filter elements by. 
例子：
jQuery Code
$("p").remove();
Before
<p>Hello</p> how are <p>you?</p>
Result:
how are

jQuery Code
$("p").remove(".hello");
Before
<p class="hello">Hello</p> how are <p>you?</p>
Result:
how are <p>you?</p>

函数：wrap(html)
功能：对匹配元素用html包裹起来
返回：jQuery对象
参数：
例子：
jQuery Code
$("p").wrap("<div class='wrap'></div>");
Before
<p>Test Paragraph.</p>
Result:
<div class='wrap'><p>Test Paragraph.</p></div>

函数：wrap(elem)
功能：对指定元素用html包裹起来
参数：
例子：
jQuery Code
$("p").wrap( document.getElementById('content') );
Before
<p>Test Paragraph.</p><div id="content"></div>
Result:
<div id="content"><p>Test Paragraph.</p></div>