jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
更新時(shí)間：2012年12月17日 16:10:24 作者：
復(fù)制節(jié)點(diǎn)也是常用的DOM操作之一，例如很多購物網(wǎng)站的效果,本文將介紹jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)等實(shí)用DOM操作，有需的朋友可以參考下
本文章簡(jiǎn)單的介紹了關(guān)于jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)程序?qū)崿F(xiàn)，有需要學(xué)習(xí)的朋友可參考參考。
<div></div>
<p></p>
需要把p標(biāo)簽移動(dòng)到div標(biāo)簽里，經(jīng)過測(cè)試發(fā)現(xiàn)，在jQuery中移動(dòng)dom節(jié)點(diǎn)非常方便：
$('div').append($('p'))
這樣即可把p標(biāo)簽移動(dòng)到div標(biāo)簽里，千萬不要寫成這樣：
$('div').append( $('p').html() )
這樣只是把p標(biāo)簽里的內(nèi)容復(fù)制到div標(biāo)簽里。
$('div').append( $('p').clone(true))
例
$(function(){
$(".nm_ul li").click(function(){
$(this).clone(true).appendTo(".nm_ul"); // 復(fù)制當(dāng)前點(diǎn)擊的節(jié)點(diǎn)，并將它追加到<ul>元素
})
});
而且當(dāng)clone參數(shù)設(shè)置為true時(shí)還可以將按鈕上綁定的事件一起復(fù)制到新按鈕上
$('div').append( $('p').clone())
移動(dòng)節(jié)點(diǎn)
將頁面上的一個(gè)節(jié)點(diǎn)移動(dòng)到另外一個(gè)地方可以用jq的內(nèi)部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接將選中的節(jié)點(diǎn)傳遞進(jìn)去就可以實(shí)現(xiàn)移動(dòng)
<button>Move Me!</button>
<div id="box"></div>
實(shí)例
$("button").click(function(){
$(this).appendTo($("#box"));
//或者用append
$("#box").append(this);
});
復(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魔法'>簡(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>元素后需要再復(fù)制一個(gè)<li>元素，可以使用clone()方法來完成，先來看看效果：
效果演示
歡迎訪問腳本之家圖書館
簡(jiǎn)單易懂的PHP魔法
簡(jiǎn)單易懂的C魔法
簡(jiǎn)單易懂的JavaScript魔法
簡(jiǎn)單易懂的JQuery魔法
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ù)制自己，并且他的副本也有同樣功能。
})
在做一個(gè)項(xiàng)目時(shí)，需要dom節(jié)點(diǎn)移動(dòng)，如以下代碼：
復(fù)制代碼 代碼如下:
<div></div>
<p></p>
需要把p標(biāo)簽移動(dòng)到div標(biāo)簽里，經(jīng)過測(cè)試發(fā)現(xiàn)，在jQuery中移動(dòng)dom節(jié)點(diǎn)非常方便：
復(fù)制代碼 代碼如下:
$('div').append($('p'))
這樣即可把p標(biāo)簽移動(dòng)到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)前點(diǎn)擊的節(jié)點(diǎn)，并將它追加到<ul>元素
})
});
而且當(dāng)clone參數(shù)設(shè)置為true時(shí)還可以將按鈕上綁定的事件一起復(fù)制到新按鈕上
在clone()方法中傳遞了一個(gè)參數(shù)true，它的含義是復(fù)制元素的同時(shí)復(fù)制元素中所綁定的事件。因此該元素的副本也同樣具有復(fù)制功能。如果不希望事件也被復(fù)制，則可以這么寫：
復(fù)制代碼 代碼如下:
$('div').append( $('p').clone())
移動(dòng)節(jié)點(diǎn)
將頁面上的一個(gè)節(jié)點(diǎn)移動(dòng)到另外一個(gè)地方可以用jq的內(nèi)部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接將選中的節(jié)點(diǎn)傳遞進(jìn)去就可以實(shí)現(xiàn)移動(dòng)
復(fù)制代碼 代碼如下:
<button>Move Me!</button>
<div id="box"></div>
實(shí)例
$("button").click(function(){
$(this).appendTo($("#box"));
//或者用append
$("#box").append(this);
});
復(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)如下：
復(fù)制代碼 代碼如下:
<p class="nm_p" title="歡迎訪問腳本之家圖書館" >歡迎訪問腳本之家圖書館</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>元素后需要再復(fù)制一個(gè)<li>元素，可以使用clone()方法來完成，先來看看效果：
效果演示
歡迎訪問腳本之家圖書館
簡(jiǎn)單易懂的PHP魔法
簡(jiǎn)單易懂的C魔法
簡(jiǎn)單易懂的JavaScript魔法
簡(jiǎn)單易懂的JQuery魔法
JQuery代碼如下：
復(fù)制代碼 代碼如下:
$(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代碼：
復(fù)制代碼 代碼如下:
$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); // 注意參數(shù)true
//可以復(fù)制自己，并且他的副本也有同樣功能。
})
您可能感興趣的文章:
- jQuery的DOM操作之刪除節(jié)點(diǎn)示例
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- jQuery DOM操作 基于命令改變頁面
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- jQuery DOM操作小結(jié)與實(shí)例
- jQuery常見面試題之DOM操作詳析
- 淺談jQuery 選擇器和dom操作
- Jquery基礎(chǔ)教程之DOM操作
- 鋒利的jQuery jQuery中的DOM操作
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jQuery DOM操作實(shí)例
- jQuery中DOM常見操作實(shí)例小結(jié)
相關(guān)文章
jQuery的ajax和遍歷數(shù)組json實(shí)例代碼
下面小編就為大家?guī)硪黄猨Query的ajax和遍歷數(shù)組json實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08![jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)](http://img.jbzj.com/images/xgimg/bcimg1.png)
jQuery的選擇器中的通配符[id^=''code'']或[name^=''code'']及jquery選擇器總結(jié)
這篇文章主要介紹了jQuery的選擇器中的通配符[id^='code']或[name^='code']及jquery選擇器總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-12-12
jQuery在iframe中無法彈出對(duì)話框的解決方法
如果在iframe中使用則彈不出對(duì)話框，而有時(shí)候我們還必須得使用iframe而不能用jQuery的load方式，下面有個(gè)不錯(cuò)的處理方法，希望對(duì)大家有所幫助2014-01-01
jQuery Autocomplete自動(dòng)完成插件
jQuery Autocomplete plugin 寫的比較滿意，拿出來分享，歡迎大家找BUG。2010-07-07
jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能
本文主要介紹了jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能的代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
jquery對(duì)所有input type=text的控件賦值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query對(duì)所有input type=text的控件賦值實(shí)現(xiàn)方法。小編覺的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
兩個(gè)select之間option的互相添加操作(jquery實(shí)現(xiàn))
兩個(gè)select,將其中一個(gè)select選中的選項(xiàng)添加到另一個(gè)select中,或者點(diǎn)擊全部添加按鈕將所有的option都添加過去.2009-11-11
jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
本篇文章主要是對(duì)jquery某一元素重復(fù)綁定的問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01