JQuery復(fù)制DOM節(jié)點(diǎn)的方法
本文實(shí)例講述了JQuery復(fù)制DOM節(jié)點(diǎn)的方法。分享給大家供大家參考。具體分析如下：
復(fù)制節(jié)點(diǎn)也是常用的DOM操作之一，例如很多購物網(wǎng)站的效果，用戶不僅可以通過單擊商品下方的“選擇”按鈕購買相應(yīng)的產(chǎn)品，也可以通過鼠標(biāo)拖動(dòng)商品并將其放到購物車中。這個(gè)商品拖動(dòng)功能就是用的復(fù)制節(jié)點(diǎn)，將用戶選擇的商品所處的節(jié)點(diǎn)元素復(fù)制一次，并將其跟隨鼠標(biāo)移動(dòng)，從而達(dá)到購物效果。
HTML DOM結(jié)構(gòu)如下：
<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ù)制一個(gè)<li>元素，可以使用clone()方法來完成。
JQuery代碼如下：
$(function(){
$(".nm_ul li").click(function(){
$(this).clone(true).appendTo(".nm_ul");
// 復(fù)制當(dāng)前點(diǎn)擊的節(jié)點(diǎn)，并將它追加到<ul>元素
})
});
在頁面中單擊隨便一項(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ù)制功能（本例中是單擊事件）。
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
- JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
- JS/jQuery判斷DOM節(jié)點(diǎn)是否存在的簡單方法
- JQuery插入DOM節(jié)點(diǎn)的方法
- jQuery中DOM節(jié)點(diǎn)的刪除方法總結(jié)（超全面）
- JQuery遍歷DOM節(jié)點(diǎn)的方法
- JQuery查找DOM節(jié)點(diǎn)的方法
- js和jquery對dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- JQuery替換DOM節(jié)點(diǎn)的方法
- JQuery包裹DOM節(jié)點(diǎn)的方法
- jquery對dom節(jié)點(diǎn)的操作【推薦】
- JQuery中DOM節(jié)點(diǎn)的操作與訪問方法實(shí)例分析
相關(guān)文章
上文介紹了如何篩選到需要的元素。得到了元素之后就要對其進(jìn)行操作。2010-03-03
jQuery中.attr()和.data()的區(qū)別分析
$.attr()和$.data()本質(zhì)上屬于 DOM屬性 和 Jquery對象屬性 的區(qū)別。下面通過一個(gè)示例給大家介紹jQuery中.attr()和.data()的區(qū)別，一起看看吧2017-09-09
基于jquery的web頁面日期格式化插件，需要的朋友可以參考下。2011-11-11
當(dāng)鼠標(biāo)移到table行時(shí)會隨著改變顏色，在視覺上有一定的辨別效果，下面有個(gè)不錯(cuò)的示例，大家不妨參考下2014-05-05
jQuery的3種請求方式$.post,$.get,$.getJSON
這篇文章主要介紹了jQuery的3種請求方式$.post,$.get,$.getJSON,需要的朋友可以參考下2014-03-03
利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)
這篇文章主要介紹了利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)的方法,這里的GridView是指C#軟件開發(fā)中的GridView控件,需要的朋友可以參考下2015-12-12
使用jQuery Mobile框架開發(fā)移動(dòng)端Web App的入門教程
jQuery Mobile是移動(dòng)端的基于jQuery的Web前端開發(fā)框架,移動(dòng)設(shè)備上的瀏覽器對HTML5的支持普遍較強(qiáng),因而jQuery Mobile的UI設(shè)計(jì)主要針對HTML5,下面就來詳細(xì)看一下使用jQuery Mobile框架開發(fā)移動(dòng)端Web App的入門教程2016-05-05
jquery submit ie6下失效的原因分析及解決方法
jquery submit ie6下失效的原因分析及解決方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
js jquery驗(yàn)證銀行卡號信息正則學(xué)習(xí)
銀行卡號格式驗(yàn)證如何錯(cuò)誤將提示：格式錯(cuò)誤，應(yīng)該是19位數(shù)字，利用正則實(shí)現(xiàn)，感興趣的朋友可以了解下，希望本文對你學(xué)習(xí)正則有所幫助2013-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單拖拽功能,結(jié)合實(shí)例形式分析了jQuery鼠標(biāo)事件響應(yīng)及頁面元素動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09