jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能。分享給大家供大家參考，具體如下：
一、追加節(jié)點(diǎn)分為父子和兄弟節(jié)點(diǎn)的追加。每個追加節(jié)點(diǎn)的方法又分主動追加和被動追加。
//1、父子關(guān)系的添加
//主動添加
$('#shu').append('<li>關(guān)羽</li>');//往后添加
$('#shu').prepend('<li>黃忠</li>');//往前添加
//被動添加
$('<li>黃蓋</li>').appendTo($('#wu'));
$('<li>陸遜</li>').prependTo($('#wu'));
//添加已存節(jié)點(diǎn)，發(fā)生位置改變
$('#shu').prepend($('#wu li:eq(1)'));
//2、兄弟關(guān)系的添加.after .before .insertAfter .insertBefore
//主動
$('#liu').after('<li>趙云</li>');
$('#liu').before('<li>諸葛亮</li>');
//被動
$('<li>黃月英</li>').insertAfter($('#liu'));
$('<li>孫尚香</li>').insertBefore($('#liu'));
二、替換節(jié)點(diǎn).replaceAll .replaceWith
//replaceAll主動替換
$('#wu').replaceAll($('#shu'));
//replaceWith被動替換
$('#yu').replaceWith('<li>黃蓋</li>');
三、刪除節(jié)點(diǎn).empty() .remove()
$('#wu').empty(); //清空對應(yīng)的子節(jié)點(diǎn)
$('#fei').remove(); //刪除匹配到的節(jié)點(diǎn)
四、復(fù)制節(jié)點(diǎn) .clone(true) .clone(false)
參數(shù)為true，節(jié)點(diǎn)和其身上的事件都給復(fù)制
參數(shù)為false，只復(fù)制節(jié)點(diǎn)本身（包括內(nèi)部的信息）
$('#fei').clone(false); //只復(fù)制節(jié)點(diǎn)本身
$('#fei').clone(true); //復(fù)制節(jié)點(diǎn)和事件
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁面元素操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery動態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
- js和jquery對dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- jQuery替換節(jié)點(diǎn)用法示例(使用replaceWith方法)
- JQuery替換DOM節(jié)點(diǎn)的方法
- jQuery:節(jié)點(diǎn)(插入,復(fù)制,替換,刪除)操作
- jQuery的DOM操作之刪除節(jié)點(diǎn)示例
- JQuery給元素添加/刪除節(jié)點(diǎn)比如select
- JQuery刪除DOM節(jié)點(diǎn)的方法
- 刪除節(jié)點(diǎn)的jquery代碼
- jQuery刪除當(dāng)前節(jié)點(diǎn)元素
- jQuery DOM刪除節(jié)點(diǎn)操作指南
- jQuery復(fù)制節(jié)點(diǎn)用法示例(clone方法)
相關(guān)文章
jQuery層級選擇器_動力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery層級選擇器的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
這篇文章主要對jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動層插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動層插件,具有點(diǎn)擊彈出帶有遮罩層的浮動層效果,且浮動層可拖動、可關(guān)閉,需要的朋友可以參考下2015-09-09
Ajax一個向后端發(fā)送請求的方式,下面這篇文章主要給大家介紹了關(guān)于jQuery發(fā)送Ajax請求的幾種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06
事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達(dá)了對象層次的最頂層2014-07-07
這篇文章主要介紹了EasyUI為Numberbox添加blur事件的方法 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
jquery檢測input checked 控件是否被選中的方法
這篇文章主要介紹了jquery檢測input checked 控件是否被選中的方法,需要的朋友可以參考下2014-03-03
jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法
這篇文章主要介紹了jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實(shí)例形式分析了jQuery的ajax前端調(diào)用及后臺交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實(shí)例共讀者下載,需要的朋友可以參考下2015-12-12
jquery創(chuàng)建一個ajax關(guān)鍵詞數(shù)據(jù)搜索實(shí)現(xiàn)思路
我們經(jīng)常需要在前臺頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索這已經(jīng)成為了一種習(xí)慣今天給大家分享一下如何使用 jQuery，MySQL和Ajax創(chuàng)建簡單和有吸引力的Ajax搜索,感興趣的你可不要錯過了哈2013-02-02