天天看點

jQuery學習筆記:文檔處理

一、内部插入

1、append(content)

向每個比對的元素内部追加内容。這個操作與對指定的元素執行appendChild方法,将它們添加到文檔中的情況類似。

傳回值 jQuery

參數 

content (String, Element, jQuery) : 要追加到目标中的内容

示例:

//向所有段落中追加一些HTML标記

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

2、appendTo(content)

把所有比對的元素追加到另一個、指定的元素元素集合中。

實際上,使用這個方法是颠倒了正常的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

content (String) :用于被追加的内容

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

/*

示例文檔片段:<p>I would like to say: </p><div id="foo"></div> 

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

*/

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

3、prepend(content)

向每個比對的元素内部前置内容。這是向所有比對元素内部的開始處插入内容的最佳方式。。

content (String, Element, jQuery) : 要插入到目标元素内部前端的内容

jQuery學習筆記:文檔處理

Code

4、prependTo(content)

把所有比對的元素前置到另一個、指定的元素元素集合中。

實際上,使用這個方法是颠倒了正常的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

content (String) :用于比對元素的jQuery表達式

jQuery學習筆記:文檔處理

二、外部插入

1、after(content)

在每個比對的元素之後插入内容。

content (String, Element, jQuery) : 插入到每個目标後的内容

jQuery學習筆記:文檔處理

2、before(content)

在每個比對的元素之前插入内容。

content (String, Element, jQuery) : 插入到每個目标前的内容

jQuery學習筆記:文檔處理

//在所有段落之前插入一些HTML标記代碼 

文檔片段:<p>I would like to say: </p> 

傳回結果: <b>Hello</b><p>I would like to say: </p> 

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

jQuery學習筆記:文檔處理

3、insertAfter(content)

把所有比對的元素插入到另一個、指定的元素元素集合的後面。

實際上,使用這個方法是颠倒了正常的$(A).after(B)的操作,即不是把B插入到A後面,而是把A插入到B後面。

content (String) : 用于比對元素的jQuery表達式

jQuery學習筆記:文檔處理

4、insertBefore(content)

把所有比對的元素插入到另一個、指定的元素元素集合的前面。

實際上,使用這個方法是颠倒了正常的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

jQuery學習筆記:文檔處理

三、包裹

1、wrap(html)

把所有比對的元素用其他元素的結構化标記包裹起來。

這種包裝對于在文檔中插入額外的結構化标記最有用,而且它不會破壞原始文檔的語義品質。

這個函數的原理是檢查提供的第一個元素(它是由所提供的HTML标記代碼動态生成的),并在它的代碼結構中找到最上層的祖先元素--這個祖先元素就是包裹元素。當HTML标記代碼中的元素包含文本時無法使用這個函數。是以,如果要添加文本應該在包裹完成之後再行添加。

html (String) : HTML标記代碼字元串,用于動态生成元素并包裹目标元素

jQuery學習筆記:文檔處理

//把所有的段落用一個新建立的div包裹起來 

文檔片段:<p>Test Paragraph.</p> 

傳回結果:<div class="wrap"><p>Test Paragraph.</p></div> 

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

jQuery學習筆記:文檔處理

ps:看完示例才發現定義說明實在太狗血了,囧。

2、wrap(elem)

把所有比對的元素用其他元素的結構化标記包裝起來。

elem (Element) : 用于包裝目标元素的DOM元素

jQuery學習筆記:文檔處理

3、wrapAll(html)

将所有比對的元素用單個元素包裹起來

這和 '.wrap()' 是不同的,'.wrap()'為每一個比對的元素都包裹一次。

這種包裝對于在文檔中插入額外的結構化标記最有用,而且它不會破壞原始文檔的語義品質。這個函數的原理是檢查提供的第一個元素并在它的代碼結構中找到最上層的祖先元素--這個祖先元素就是包裝元素。

html (String) : HTML标記代碼字元串,用于動态生成元素并包裝目标元素

jQuery學習筆記:文檔處理

//用一個生成的div将所有段落包裹起來 

文檔片段:<p>Hello</p><p>cruel</p><p>World</p> 

傳回結果:<div><p>Hello</p><p>cruel</p><p>World</p></div> 

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

jQuery學習筆記:文檔處理

4、wrapAll(elem)

jQuery學習筆記:文檔處理

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

jQuery學習筆記:文檔處理

5、wrapInner(html)

将每一個比對的元素的子内容(包括文本節點)用一個HTML結構包裹起來

這個函數的原理是檢查提供的第一個元素(它是由所提供的HTML标記代碼動态生成的),并在它的代碼結構中找到最上層的祖先元素--這個祖先元素就是包裝元素。

jQuery學習筆記:文檔處理

//把所有段落内的每個子内容加粗 

傳回結果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p> 

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

jQuery學習筆記:文檔處理

6、wrapInner(elem)

将每一個比對的元素的子内容(包括文本節點)用DOM元素包裹起來。

jQuery學習筆記:文檔處理

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

jQuery學習筆記:文檔處理

四、替換

1、replaceWith(content)

将所有比對的元素替換成指定的HTML或DOM元素。

content (String, Element, jQuery) : 用于将比對元素替換掉的内容

jQuery學習筆記:文檔處理

//把所有的段落标記替換成加粗的标記 

傳回結果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 

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

jQuery學習筆記:文檔處理

2、replaceAll(selector)

用比對的元素替換掉所有 selector比對到的元素。

selector (選擇器) : 用于查找所要被替換的元素

jQuery學習筆記:文檔處理

傳回結果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 

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

jQuery學習筆記:文檔處理

五、删除

1、empty()

删除比對的元素集合中所有的子節點。

jQuery學習筆記:文檔處理

//把所有段落的子元素(包括文本節點)删除 

文檔片段:<p>Hello, <span>Person</span> <a href="#">and person</a></p> 

傳回結果:<p></p> 

$("p").empty(); 

jQuery學習筆記:文檔處理

2、remove([expr])

從DOM中删除所有比對的元素。這個方法不會把比對的元素從jQuery對象中删除,因而可以在将來再使用這些比對的元素。

expr (String) : (可選) 用于篩選元素的jQuery表達式

jQuery學習筆記:文檔處理

//從DOM中把所有段落删除 

文檔片段:<p class="hello">Hello</p> how are <p>you?</p> 

傳回結果: how are <p>you?</p> 

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

jQuery學習筆記:文檔處理

六、複制

1、clone()

克隆比對的DOM元素并且選中這些克隆的副本。在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。

jQuery學習筆記:文檔處理

//克隆所有b元素(并選中這些克隆的副本),然後将它們前置到所有段落中

文檔片段:<b>Hello</b><p>, how are you?</p> 

傳回結果:<b>Hello</b><p><b>Hello</b>, how are you?</p>  

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

jQuery學習筆記:文檔處理

2、clone(true)

元素以及其所有的事件處理并且選中這些克隆的副本。在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。

true (Boolean) : 設定為true以便複制元素的所有事件處理

jQuery學習筆記:文檔處理

//建立一個按鈕,他可以複制自己,并且他的副本也有同樣功能

文檔片段:<button>Clone Me!</button> 

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

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

}); 

jQuery學習筆記:文檔處理

本文轉自JeffWong部落格園部落格,原文連結:http://www.cnblogs.com/jeffwongishandsome/archive/2009/09/09/1549467.html,如需轉載請自行聯系原作者

繼續閱讀