DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> juqery 學習之五 文檔處理 包裹、替換、刪除、復制
juqery 學習之五 文檔處理 包裹、替換、刪除、復制
編輯:JQuery特效代碼     
wrap(html)
把所有匹配的元素用其他元素的結構化標記包裹起來。
這種包裝對於在文檔中插入額外的結構化標記最有用,而且它不會破壞原始文檔的語義品質。
這個函數的原理是檢查提供的第一個元素(它是由所提供的HTML標記代碼動態生成的),並在它的代碼結構中找到最上層的祖先元素--這個祖先元素就是包裹元素。

當HTML標記代碼中的元素包含文本時無法使用這個函數。因此,如果要添加文本應該在包裹完成之後再行添加。

--------------------------------------------------------------------------------

Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.
返回值
jQuery

參數
html (String) : HTML標記代碼字符串,用於動態生成元素並包裹目標元素

示例
把所有的段落用一個新創建的div包裹起來

HTML 代碼:

<p>Test Paragraph.</p>
jQuery 代碼:

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

<div class="wrap"><p>Test Paragraph.</p></div>
-------------------------------------------------------------------------------------------------------------------------------------------------
wrap(elem)
把所有匹配的元素用其他元素的結構化標記包裝起來。

--------------------------------------------------------------------------------

Wrap all matched elements with a structure of other elements.
返回值
jQuery

參數
elem (Element) : 用於包裝目標元素的DOM元素

示例
用ID是"content"的div將每一個段落包裹起來

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>
-------------------------------------------------------------------------------------------------------------------------------------------------
wrapAll(html)
將所有匹配的元素用單個元素包裹起來
這於 '.wrap()' 是不同的,'.wrap()'為每一個匹配的元素都包裹一次。
這種包裝對於在文檔中插入額外的結構化標記最有用,而且它不會破壞原始文檔的語義品質。

這個函數的原理是檢查提供的第一個元素並在它的代碼結構中找到最上層的祖先元素--這個祖先元素就是包裝元素。

--------------------------------------------------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '.wrap()' where each element in the matched set would get wrapped with an element.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
返回值
jQuery

參數
html (String) : TML標記代碼字符串,用於動態生成元素並包裝目標元素

示例
用一個生成的div將所有段落包裹起來

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:

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

<div><p>Hello</p><p>cruel</p><p>World</p></div>
-------------------------------------------------------------------------------------------------------------------------------------------------
wrapAll(elem)
將所有匹配的元素用單個元素包裹起來
這於 '.wrap()' 是不同的,'.wrap()'為每一個匹配的元素都包裹一次。

--------------------------------------------------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '.wrap()' where each element in the matched set would get wrapped with an element.
返回值
jQuery

參數
elem (Element) : 用於包裝目標元素的DOM元素

示例
用一個生成的div將所有段落包裹起來

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>
-------------------------------------------------------------------------------------------------------------------------------------------------
wrapInner(html)
將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
這個函數的原理是檢查提供的第一個元素(它是由所提供的HTML標記代碼動態生成的),並在它的代碼結構中找到最上層的祖先元素--這個祖先元素就是包裝元素。

--------------------------------------------------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
返回值
jQuery

參數
html (String) : HTML標記代碼字符串,用於動態生成元素並包裝目標元素

示例
把所有段落內的每個子內容加粗

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:

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

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
-------------------------------------------------------------------------------------------------------------------------------------------------
wrapInner(elem)
將每一個匹配的元素的子內容(包括文本節點)用DOM元素包裹起來

--------------------------------------------------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
返回值
jQuery

參數
elem (Element) : 用於包裝目標元素的DOM元素

示例
把所有段落內的每個子內容加粗

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>
-------------------------------------------------------------------------------------------------------------------------------------------------
replaceWith(content)
將所有匹配的元素替換成指定的HTML或DOM元素。

--------------------------------------------------------------------------------

Replaces all matched elements with the specified HTML or DOM elements.
返回值
jQuery

參數
content (String, Element, jQuery) : 用於將匹配元素替換掉的內容

示例
把所有的段落標記替換成加粗的標記。

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:

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

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
-------------------------------------------------------------------------------------------------------------------------------------------------
replaceAll(selector)
用匹配的元素替換掉所有 selector匹配到的元素。

--------------------------------------------------------------------------------

Replaces the elements matched by the specified selector with the matched elements.
返回值
jQuery

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

示例
把所有的段落標記替換成加粗標記

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:

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

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
-------------------------------------------------------------------------------------------------------------------------------------------------
empty()
刪除匹配的元素集合中所有的子節點。

--------------------------------------------------------------------------------

Remove all child nodes from the set of matched elements.
返回值
jQuery

示例
把所有段落的子元素(包括文本節點)刪除

HTML 代碼:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代碼:

$("p").empty();
結果:

<p></p>
-------------------------------------------------------------------------------------------------------------------------------------------------
remove([expr])
從DOM中刪除所有匹配的元素。
這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。

--------------------------------------------------------------------------------

Removes all matched elements from the DOM.
This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Can be filtered with an optional expression.
返回值
jQuery

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

示例
從DOM中把所有段落刪除

HTML 代碼:

<p>Hello</p> how are <p>you?</p>
jQuery 代碼:

$("p").remove();
結果:

how are

--------------------------------------------------------------------------------

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

HTML 代碼:

<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代碼:

$("p").remove(".hello");
結果:

how are <p>you?</p>
-------------------------------------------------------------------------------------------------------------------------------------------------
clone()
克隆匹配的DOM元素並且選中這些克隆的副本。
在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。

--------------------------------------------------------------------------------

Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.
返回值
jQuery

示例
克隆所有b元素(並選中這些克隆的副本),然後將它們前置到所有段落中。

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>
-------------------------------------------------------------------------------------------------------------------------------------------------
clone(true)
元素以及其所有的事件處理並且選中這些克隆的副本
在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。

--------------------------------------------------------------------------------

Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.
返回值
jQuery

參數
true (Boolean) : 設置為true以便復制元素的所有事件處理

示例
創建一個按鈕,他可以復制自己,並且他的副本也有同樣功能。

HTML 代碼:

<button>Clone Me!</button>
jQuery 代碼:

$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved