上一節(jié)《Jquery基礎(chǔ)學(xué)習(xí)筆記(1)》說(shuō)的是一些基礎(chǔ)知識(shí)，

http://www.cnblogs.com/ywqu/archive/2009/05/26/1490403.html

本節(jié)讓我們繼續(xù)Jquery知識(shí)的了解：文檔處理。文檔處理主要是對(duì)HTML元素進(jìn)行一些增操作，刪除操作，復(fù)制操作，替換操作。主要包括以下幾部分：（1）內(nèi)部插入（2）外部插入（3）包裹（4）替換（5）刪除（6）賦值。那我們就開(kāi)始詳細(xì)地看一下。

1、內(nèi)部插入：向一些元素的內(nèi)部插入內(nèi)容

(1)append(content) :向每個(gè)匹配的元素內(nèi)部追加內(nèi)容，追加到元素內(nèi)部的末尾，比如

描述:

向所有段落中追加一些HTML標(biāo)記。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").append("<b>Hello</b>");

結(jié)果:

[ <p>I would like to say: <b>Hello</b></p> ]

（2）appendTo(content) 把所有匹配的元素追加到另一個(gè)指定的元素元素集合中

描述:

把所有段落追加到ID值為foo的元素中。

HTML 代碼:

<p>I would like to say: </p>

<div></div><div></div>

jQuery 代碼:

$("p").appendTo("div");

結(jié)果:

<div><p>I would like to say: </p></div>

<div><p>I would like to say: </p></div>

(3)       prepend(content) 向每個(gè)匹配的元素內(nèi)部前置內(nèi)容

描述:

向所有段落中前置一些HTML標(biāo)記代碼。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").prepend("<b>Hello</b>");

結(jié)果:

[ <p><b>Hello</b>I would like to say: </p> ]

(4) prepend() 把所有匹配的元素前置到另一個(gè)、指定的元素元素集合中。

描述:

把所有段落追加到ID值為foo的元素中。

HTML 代碼:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代碼:

$("p").prependTo("#foo");

結(jié)果:

<div id="foo"><p>I would like to say: </p></div>

2、內(nèi)部插入：向一些元素的外部插入內(nèi)容

（1）after（content）在每個(gè)匹配的元素之后插入內(nèi)容。

描述:

在所有段落之后插入一些HTML標(biāo)記代碼。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").after("<b>Hello</b>");

結(jié)果:

<p>I would like to say: </p><b>Hello</b>

（2）before() 在每個(gè)匹配的元素之前插入內(nèi)容

描述:

在所有段落之前插入一些HTML標(biāo)記代碼。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").before("<b>Hello</b>");

結(jié)果:

[ <b>Hello</b><p>I would like to say: </p> ]

(3)insertafter 把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的后面。

描述:

把所有段落插入到一個(gè)元素之后。與 $("#foo").after("p")相同

HTML 代碼:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代碼:

$("p").insertAfter("#foo");

結(jié)果:

<div id="foo">Hello</div><p>I would like to say: </p>

(4)insertBefore 把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的前面

描述:

把所有段落插入到一個(gè)元素之前。與 $("#foo").before("p")相同。

HTML 代碼:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery 代碼:

$("p").insertBefore("#foo");

結(jié)果:

<p>I would like to say: </p><div id="foo">Hello</div>

3、包裹：把一些元素包裹起來(lái)

(1)wrap(html) 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)

描述:

把所有的段落用一個(gè)新創(chuàng)建的div包裹起來(lái)

HTML 代碼:

<p>Test Paragraph.</p>

jQuery 代碼:

$("p").wrap("<div class='wrap'></div>");

結(jié)果:

<div class="wrap"><p>Test Paragraph.</p></div>

(2) wrap(elem) 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裝起來(lái)

描述:

用ID是"content"的div將每一個(gè)段落包裹起來(lái)

HTML 代碼:

<p>Test Paragraph.</p><div id="content"></div>

jQuery 代碼:

$("p").wrap(document.getElementById('content'));

結(jié)果:

<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>

(3)wrapAll(html) 將所有匹配的元素用單個(gè)元素包裹起來(lái)

描述:

用一個(gè)生成的div將所有段落包裹起來(lái)

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").wrapAll("<div></div>");

結(jié)果:

<div><p>Hello</p><p>cruel</p><p>World</p></div>

(4) wrapAll(elem)將所有匹配的元素用單個(gè)元素包裹起來(lái)

描述:

用一個(gè)生成的div將所有段落包裹起來(lái)

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").wrapAll(document.createElement("div"));

結(jié)果:

<div><p>Hello</p><p>cruel</p><p>World</p></div>

(5) wrapInner(html)將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用一個(gè)HTML結(jié)構(gòu)包裹起來(lái)

描述:

把所有段落內(nèi)的每個(gè)子內(nèi)容加粗

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").wrapInner("<b></b>");

結(jié)果:

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

(6) wrapInner(elem)

描述:

把所有段落內(nèi)的每個(gè)子內(nèi)容加粗

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").wrapInner(document.createElement("b"));

結(jié)果:

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

4、替換：用制定的元素替換一些HMTL或者DOM元素

（1）replaceWith(content) 將所有匹配的元素替換成指定的HTML或DOM元素

描述:

把所有的段落標(biāo)記替換成加粗的標(biāo)記。

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").replaceWith("<b>Paragraph. </b>");

結(jié)果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

(2) repalceAll(selector) 用匹配的元素替換掉所有 selector匹配到的元素。

描述:

把所有的段落標(biāo)記替換成加粗標(biāo)記

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("<b>Paragraph. </b>").replaceAll("p");

結(jié)果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

5、刪除：刪除制定的元素

（1）empty() 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。

描述:

把所有段落的子元素（包括文本節(jié)點(diǎn)）刪除

HTML 代碼:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代碼:

$("p").empty();

結(jié)果:

<p></p>

(2)remove([expr]) 從DOM中刪除所有匹配的元素

描述：

從DOM中把所有段落刪除

HTML 代碼:

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

jQuery 代碼:

$("p").remove();

結(jié)果:

how are

描述:

從DOM中把帶有hello類的段落刪除

HTML 代碼:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代碼:

$("p").remove(".hello");

結(jié)果:

how are <p>you?</p>

5、復(fù)制：克隆匹配的元素

(1)Clone() 克隆匹配的DOM元素并且選中這些克隆的副本。

描述:

克隆所有b元素（并選中這些克隆的副本），然后將它們前置到所有段落中。

HTML 代碼:

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

jQuery 代碼:

$("b").clone().prependTo("p");

結(jié)果:

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

(2) clone(true) 元素以及其所有的事件處理并且選中這些克隆的副本

描述:

創(chuàng)建一個(gè)按鈕，他可以復(fù)制自己，并且他的副本也有同樣功能。

HTML 代碼:

<button>Clone Me!</button>

jQuery 代碼:

$("button").click(function(){

  $(this).clone(true).insertAfter(this);

});

終于整理完畢。以上內(nèi)容參考與Jquery1.3中文參考。

希望此篇對(duì)初學(xué)者有益。

• jquery