DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery實現節點的追加、替換、刪除、復制功能示例
jQuery實現節點的追加、替換、刪除、復制功能示例
編輯:JQuery入門技巧     

本文實例講述了jQuery實現節點的追加、替換、刪除、復制功能。分享給大家供大家參考,具體如下:

一、追加節點分為父子和兄弟節點的追加。每個追加節點的方法又分主動追加和被動追加。

//1、父子關系的添加
//主動添加
$('#shu').append('<li>關羽</li>');//往後添加
$('#shu').prepend('<li>黃忠</li>');//往前添加
//被動添加
$('<li>黃蓋</li>').appendTo($('#wu'));
$('<li>陸遜</li>').prependTo($('#wu'));
//添加已存節點,發生位置改變
$('#shu').prepend($('#wu li:eq(1)'));
//2、兄弟關系的添加.after .before .insertAfter .insertBefore
//主動
$('#liu').after('<li>趙雲</li>');
$('#liu').before('<li>諸葛亮</li>');
//被動
$('<li>黃月英</li>').insertAfter($('#liu'));
$('<li>孫尚香</li>').insertBefore($('#liu'));

二、替換節點.replaceAll   .replaceWith

//replaceAll主動替換
$('#wu').replaceAll($('#shu'));
//replaceWith被動替換
$('#yu').replaceWith('<li>黃蓋</li>');

三、刪除節點.empty()  .remove()

$('#wu').empty(); //清空對應的子節點
$('#fei').remove(); //刪除匹配到的節點

四、復制節點 .clone(true)  .clone(false)

參數為true,節點和其身上的事件都給復制
參數為false,只復制節點本身(包括內部的信息)

$('#fei').clone(false); //只復制節點本身
$('#fei').clone(true); //復制節點和事件

更多關於jQuery相關內容感興趣的讀者可查看本站專題:《jQuery操作DOM節點方法總結》、《jQuery頁面元素操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved