jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)節(jié)點(diǎn)的追加、替換、刪除、復(fù)制功能。分享給大家供大家參考,具體如下:
一、追加節(jié)點(diǎn)分為父子和兄弟節(jié)點(diǎn)的追加。每個(gè)追加節(jié)點(diǎn)的方法又分主動(dòng)追加和被動(dòng)追加。
//1、父子關(guān)系的添加 //主動(dòng)添加 $('#shu').append('<li>關(guān)羽</li>');//往后添加 $('#shu').prepend('<li>黃忠</li>');//往前添加 //被動(dòng)添加 $('<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 //主動(dòng) $('#liu').after('<li>趙云</li>'); $('#liu').before('<li>諸葛亮</li>'); //被動(dòng) $('<li>黃月英</li>').insertAfter($('#liu')); $('<li>孫尚香</li>').insertBefore($('#liu'));
二、替換節(jié)點(diǎn).replaceAll .replaceWith
//replaceAll主動(dòng)替換 $('#wu').replaceAll($('#shu')); //replaceWith被動(dòng)替換 $('#yu').replaceWith('<li>黃蓋</li>');
三、刪除節(jié)點(diǎn).empty() .remove()
$('#wu').empty(); //清空對(duì)應(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é)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
- js和jquery對(duì)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 給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery 給元素綁定click事件多次執(zhí)行的解決方法,比較實(shí)用,需要的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果,涉及jQuery基于事件響應(yīng)實(shí)現(xiàn)頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果,涉及jQuery鼠標(biāo)事件及fadeTo函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2016-06-06jQuery使用zTree插件實(shí)現(xiàn)樹形菜單和異步加載
這篇文章主要介紹了jQuery使用zTree插件實(shí)現(xiàn)樹形菜單和異步加載的相關(guān)方法,感興趣的小伙伴們可以參考一下2016-02-02完美解決jQuery 鼠標(biāo)快速滑過后,會(huì)執(zhí)行多次滑出的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery 鼠標(biāo)快速滑過后,會(huì)執(zhí)行多次滑出的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開始學(xué)jquery,想實(shí)現(xiàn)類似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過展開效果
這篇文章主要介紹了Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過展開效果,需要的朋友可以參考下2017-10-10