欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery復(fù)制DOM節(jié)點(diǎn)的方法

 更新時(shí)間：2015年06月11日 10:08:00   作者：簡(jiǎn)明現(xiàn)代魔法  
這篇文章主要介紹了JQuery復(fù)制DOM節(jié)點(diǎn)的方法,涉及jQuery中clone與appendTo方法的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery復(fù)制DOM節(jié)點(diǎn)的方法。分享給大家供大家參考。具體分析如下：

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

HTML DOM結(jié)構(gòu)如下：

<p class="nm_p" title="歡迎訪問(wèn)腳本之家" >歡迎訪問(wèn)腳本之家</p>
<ul class="nm_ul">
  <li title='PHP編程'>簡(jiǎn)單易懂的PHP編程</li>
  <li title='C編程'>簡(jiǎn)單易懂的C編程</li>
  <li title='JavaScript編程'>簡(jiǎn)單易懂的JavaScript編程</li>
  <li title='JQuery'>簡(jiǎn)單易懂的JQuery編程</li>
</ul>

如果單擊<li>元素后需要再?gòu)?fù)制一個(gè)<li>元素，可以使用clone()方法來(lái)完成。

JQuery代碼如下：

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

在頁(yè)面中單擊隨便一項(xiàng)后，列表最下方出現(xiàn)該項(xiàng)的新節(jié)點(diǎn)。

復(fù)制節(jié)點(diǎn)后，被復(fù)制的新元素并不具有任何行為。如果需要新元素也具有復(fù)制功能（本例中是單擊事件），可以使用如下JQuery代碼：

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

在clone()方法中傳遞了一個(gè)參數(shù)true，它的含義是復(fù)制元素的同時(shí)復(fù)制元素中所綁定的事件。因此該元素的副本也同樣具有復(fù)制功能（本例中是單擊事件）。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論