亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery移動和復(fù)制dom節(jié)點實用DOM操作案例

 更新時間：2012年12月17日 16:10:24   作者：  
復(fù)制節(jié)點也是常用的DOM操作之一，例如很多購物網(wǎng)站的效果,本文將介紹jQuery移動和復(fù)制dom節(jié)點等實用DOM操作，有需的朋友可以參考下
本文章簡單的介紹了關(guān)于jQuery移動和復(fù)制dom節(jié)點程序?qū)崿F(xiàn)，有需要學(xué)習(xí)的朋友可參考參考。

在做一個項目時，需要dom節(jié)點移動，如以下代碼：

復(fù)制代碼 代碼如下:

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

需要把p標(biāo)簽移動到div標(biāo)簽里，經(jīng)過測試發(fā)現(xiàn)，在jQuery中移動dom節(jié)點非常方便：
復(fù)制代碼 代碼如下:

$('div').append($('p'))

這樣即可把p標(biāo)簽移動到div標(biāo)簽里，千萬不要寫成這樣：
復(fù)制代碼 代碼如下:

$('div').append( $('p').html() )

這樣只是把p標(biāo)簽里的內(nèi)容復(fù)制到div標(biāo)簽里。

如果只是復(fù)制一份到div標(biāo)簽里，原來的標(biāo)簽還保留著，那么可以這么寫：

復(fù)制代碼 代碼如下:

$('div').append( $('p').clone(true))

例
復(fù)制代碼 代碼如下:

$(function(){
$(".nm_ul li").click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 復(fù)制當(dāng)前點擊的節(jié)點，并將它追加到<ul>元素
})
});

而且當(dāng)clone參數(shù)設(shè)置為true時還可以將按鈕上綁定的事件一起復(fù)制到新按鈕上

在clone()方法中傳遞了一個參數(shù)true，它的含義是復(fù)制元素的同時復(fù)制元素中所綁定的事件。因此該元素的副本也同樣具有復(fù)制功能。如果不希望事件也被復(fù)制，則可以這么寫：

復(fù)制代碼 代碼如下:

$('div').append( $('p').clone())

移動節(jié)點
將頁面上的一個節(jié)點移動到另外一個地方可以用jq的內(nèi)部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接將選中的節(jié)點傳遞進去就可以實現(xiàn)移動
復(fù)制代碼 代碼如下:

<button>Move Me!</button>
<div id="box"></div>
實例
$("button").click(function(){
$(this).appendTo($("#box"));
//或者用append
$("#box").append(this);
});

復(fù)制節(jié)點也是常用的DOM操作之一，例如很多購物網(wǎng)站的效果，用戶不僅可以通過單擊商品下方的“選擇”按鈕購買相應(yīng)的產(chǎn)品，也可以通過鼠標(biāo)拖動商品并將其放到購物車中。這個商品拖動功能就是用的復(fù)制節(jié)點，將用戶選擇的商品所處的節(jié)點元素復(fù)制一次，并將其跟隨鼠標(biāo)移動，從而達到購物效果。
HTML DOM結(jié)構(gòu)如下：
復(fù)制代碼 代碼如下:

<p class="nm_p" title="歡迎訪問腳本之家圖書館" >歡迎訪問腳本之家圖書館</p>
<ul class="nm_ul">
<li title='PHP魔法'>簡單易懂的PHP魔法</li>
<li title='C魔法'>簡單易懂的C魔法</li>
<li title='JavaScript魔法'>簡單易懂的JavaScript魔法</li>
<li title='JQuery'>簡單易懂的JQuery魔法</li>
</ul>

如果單擊<li>元素后需要再復(fù)制一個<li>元素，可以使用clone()方法來完成，先來看看效果：
效果演示
歡迎訪問腳本之家圖書館
簡單易懂的PHP魔法
簡單易懂的C魔法
簡單易懂的JavaScript魔法
簡單易懂的JQuery魔法
JQuery代碼如下：
復(fù)制代碼 代碼如下:

$(function(){
$(".nm_ul li").click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 復(fù)制當(dāng)前點擊的節(jié)點，并將它追加到<ul>元素
})
});

在頁面中單擊隨便一項后，列表最下方出現(xiàn)該項的新節(jié)點。
復(fù)制節(jié)點后，被復(fù)制的新元素并不具有任何行為。如果需要新元素也具有復(fù)制功能（本例中是單擊事件），可以使用如下JQuery代碼：
復(fù)制代碼 代碼如下:

$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); // 注意參數(shù)true
//可以復(fù)制自己，并且他的副本也有同樣功能。
})

相關(guān)文章

最新評論