jQuery函数学习

函数：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>