DOM節點的復制和替換(jQuery)


1DOM拷貝clone()

克隆節點是DOM的常見操作,jQuery提供一個clone方法,專門用於處理dom的克隆

.clone()方法深度 復制所有匹配的元素集合,包括所有匹配元素、匹配元素的下級元素、文字節點。

clone方法比較簡單就是克隆節點,但是需要注意,如果節點有事件或者數據之類的其他處理,我們需要通過clone(ture)傳遞一個布爾值ture用來指定,這樣不僅僅只是克隆單純的節點結構,還要把附帶的事件與數據給一並克隆了

例如:

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//執行操作})

//clone處理一
$("div").clone()   //只克隆了結構,事件丟失

//clone處理二
$("div").clone(true) //結構、事件與數據都克隆

使用上就是這樣簡單,使用克隆的我們需要額外知道的細節:

  • clone()方法時,在將它插入到文檔之前,我們可以修改克隆后的元素或者元素內容,如右邊代碼我 $(this).clone().css('color','red') 增加了一個顏色
  • 通過傳遞true,將所有綁定在原始元素上的事件處理函數復制到克隆元素上
  • clone()方法是jQuery擴展的,只能處理通過jQuery綁定的事件與數據
  • 元素數據(data)內對象和數組不會被復制,將繼續被克隆元素和原始元素共享。深復制的所有數據,需要手動復制每一個

2DOM替換replaceWith()和replaceAll()

之前學習了節點的內插入、外插入以及刪除方法,這節會學習替換方法replaceWith

.replaceWith( newContent ):用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合

簡單來說:用$()選擇節點A,調用replaceWith方法,傳入一個新的內容B(HTML字符串,DOM元素,或者jQuery對象)用來替換選中的節點A

看個簡單的例子:一段HTML代碼

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替換第二段的節點與內容

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')

通過jQuery篩選出第二個p元素,調用replaceWith進行替換,結果如下

<div>
    <p>第一段</p>
    <a style="color:red">替換第二段的內容</a>'
    <p>第三段</p>
</div>

.replaceAll( target ) 用集合的匹配元素替換每個目標元素

.replaceAll()和.replaceWith()功能類似,但是目標和源相反,用上述的HTML結構,我們用replaceAll處理

$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')

總結:

  • .replaceAll()和.replaceWith()功能類似,主要是目標和源的位置區別
  • .replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序
  • .replaceWith()方法,和大部分其他jQuery方法一樣,返回jQuery對象,所以可以和其他方法鏈接使用
  • .replaceWith()方法返回的jQuery對象引用的是替換前的節點,而不是通過replaceWith/replaceAll方法替換后的節點

3DOM包裹wrap()方法

如果要將元素用其他元素包裹起來,也就是給它增加一個父元素,針對這樣的處理,JQuery提供了一個wrap方法

.wrap( wrappingElement )在集合中匹配的每個元素周圍包裹一個HTML結構

簡單的看一段代碼:

<p>p元素</p>

給p元素增加一個div包裹

$('p').wrap('<div></div>')

最后的結構,p元素增加了一個父div的結構

<div>
    <p>p元素</p>
</div>

.wrap( function ) 一個回調函數,返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

使用后的效果與直接傳遞參數是一樣,只不過可以把代碼寫在函數體內部,寫法不同而已

以第一個案例為例:

$('p').wrap(function() {
    return '<div></div>';   //與第一種類似,只是寫法不一樣
})

注意:

.wrap()函數可以接受任何字符串或對象,可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套了好幾層深,但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集,以便之后使用鏈式方法。

4DOM包裹unwrap()方法

我們可以通過wrap方法給選中元素增加一個包裹的父元素。相反,如果刪除選中元素的父元素要如何處理 ?

jQuery提供了一個unwarp()方法 ,作用與wrap方法是相反的。將匹配元素集合的父級元素刪除,保留自身(和兄弟元素,如果存在)在原來的位置

看一段簡單案例:

<div>
    <p>p元素</p>
</div>

我要刪除這段代碼中的div,一般常規的方法會直接通過remove或者empty方法

$('div').remove();

但是如果我還要保留內部元素p,這樣就意味着需要多做很多處理,步驟相對要麻煩很多,為了更便捷,jQuery提供了unwarp方法很方便的處理了這個問題

$('p').unwarp();

找到p元素,然后調用unwarp方法,這樣只會刪除父輩div元素了

結果:

<p>p元素</p>

這個方法比較簡單,也不接受任何參數

5DOM包裹wrapAll()方法

wrap是針對單個dom元素處理,如果要將合中的元素用其他元素包裹起來,也就是給他們增加一個父元素,針對這樣的處理,JQuery提供了一個wrapAll方法

.wrapAll( wrappingElement )給集合中匹配的元素增加一個外面包裹HTML結構

簡單的看一段代碼:

<p>p元素</p>
<p>p元素</p>

給所有p元素增加一個div包裹

$('p').wrapAll('<div></div>')

最后的結構,2個P元素都增加了一個父div的結構

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapAll( function ) 一個回調函數,返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

通過回調的方式可以單獨處理每一個元素

以上面案例為例,

$('p').wrapAll(function() {
    return '<div><div/>'; 
})

以上的寫法的結果如下,等同於warp的處理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意:

.wrapAll()函數可以接受任何字符串或對象,可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套多層,但是最內層只能有一個元素。所有匹配元素將會被當作是一個整體,在這個整體的外部用指定的 HTML 結構進行包裹。

6DOM包裹wrapInner()方法

如果要將合集中的元素內部所有的子元素用其他元素包裹起來,並當作指定元素的子元素,針對這樣的處理,JQuery提供了一個wrapInner方法

.wrapInner( wrappingElement )給集合中匹配的元素的內部,增加包裹的HTML結構

聽起來有點繞,可以用個簡單的例子描述下,簡單的看一段代碼:

<div>p元素</div>
<div>p元素</div>

給所有元素增加一個p包裹

$('div').wrapInner('<p></p>')

最后的結構,匹配的di元素的內部元素被p給包裹了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

.wrapInner( function ) 允許我們用一個callback函數做參數,每次遇到匹配元素時,該函數被執行,返回一個DOM元素,jQuery對象,或者HTML片段,用來包住匹配元素的內容

以上面案例為例,

$('div').wrapInner(function() {
    return '<p></p>'; 
})

以上的寫法的結果如下,等同於第一種處理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意:

 當通過一個選擇器字符串傳遞給.wrapInner() 函數,其參數應該是格式正確的 HTML,並且 HTML 標簽應該是被正確關閉的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM