标签：
节点的操作和数据库操作一样，无非是增、删、改、查。
今天总结删除节点、复制节点、替换节点、与包裹节点
删除节点：
如果文档中一个元素多余，那么就需要删除掉。jQuery提供了三种删除节点的方法。分别是remove() 、 detach() 、 empty()；
remove：
1 <body> 2 <ul class="bigul"> 3 <li class="smchild">我这么可爱你不要我了。</li> 4 <li class="smchild">我的爸爸ul最宠爱我</li> 5 </ul> 6 <script> 7 $(".bigul :first-child").remove(); 8 </script> 9 </body>
detach:
1 <body> 2 <ul class="bigul"> 3 <li class="smchild">我这么可爱你不要我了。</li> 4 <li class="smchild">我的爸爸ul最宠爱我</li> 5 </ul> 6 <script> 7 $(".bigul :first-child").detach(); 8 </script> 9 </body>
empty:
1 <body> 2 <ul class="bigul"> 3 <li class="smchild">我这么可爱你不要我了。</li> 4 <li class="smchild">我的爸爸ul最宠爱我</li> 5 </ul> 6 <script> 7 $(".bigul :first-child").empty(); 8 </script> 9 </body>
这里必须注意的是，empty()并不是删除节点，只是清除节点中的内容。下面是empty()执行后的页面效果。
remove() 、 detach() 、 empty() 辨析：
remove() 和 detach()的共同点都是可以删除节点。更更严谨更科学的说法就是【剪切】，并没有真正的删除掉元素，这些元素还可以重新插入到其他的地方。不同点在于，remove() 【剪切】节点后，该节点上绑定的事件同时也被销毁，但是detach() 所【剪切】的节点上所绑定的事件都能够保留。
empty() 并不是删除，只清楚元素的内容。相当于把contains中内容替换成了null。
删除节点之后，可以使用appendTo()插入到DOM树中。
1 $(".bigul :first-child").remove().appendTo(‘你的元素内‘);
当然如果你是要剪切元素。可以直接使用appendTo:
1 $(".bigul :first-child").appendTo(‘你的元素内‘);
上下这两种写法最终的效果都是一样的。
复制节点（克隆节点）：
看到克隆，就想起了那只多莉小绵羊，clone这个单词也是克隆的音译，比较好记忆。
clone()的用法比较简单，但是作用很大。
clone(boolean)
clone的boolean默认是false。克隆节点的时候，该元素的所绑定的事件对象将不克隆，只克隆节点本身。
clone的boolean可以设置为true，克隆的时候，该元素所绑定的事件对象，将会被带到克隆的副本上去，同等具有原节点的功能。
替换节点：
替换节点用的也比较多。对于后台的数据处理特别有用，利用的好，可以实现一个页面增删改查无跳转，当然仅仅一个clone是不够的，需要后面的知识辅助，例如Ajax。
replaceWith 与 replaceAll
这两者作用是一样的，还是为了方便jQuery的链式操作。
$(‘A‘).replaceWith(‘B‘) 把A替换成B；
$(‘A‘).replaceAll(‘B‘) 把B替换成A；
包裹节点：
包裹节点，简称为【穿内衣】 、 【穿外套】 、【穿大衣】
穿内衣：wrapInner
执行代码之前的html结构：
1 <body> 2 <ul class="bigul"> 3 <li class="smchild">我是一个小美女</li> 4 <li class="smchild">我是一个小美女</li> 5 <li class="smchild">我是一个小美女</li> 6 </ul> 7 <script> 8 $(".smchild").wrapInner("<b>对呀！</b>"); 9 </script> 10 </body>
执行wrapInner()代码之后html结构：
1 <body> 2 <ul class="bigul"> 3 <li class="smchild"><b>对呀！我是一个小美女</b></li> 4 <li class="smchild"><b>对呀！我是一个小美女</b></li> 5 <li class="smchild"><b>对呀！我是一个小美女</b></li> 6 </ul> 7 <script> 8 $(".smchild").wrapInner("<b>对呀！</b>"); 9 </script> 10 </body>
穿外套：
执行wrap代码后的html结构：
1 <body> 2 <ul class="bigul"> 3 <b>对呀！<li class="smchild">我是一个小美女</li></b> 4 <b>对呀！<li class="smchild">我是一个小美女</li></b> 5 <b>对呀！<li class="smchild">我是一个小美女</li></b> 6 </ul> 7 <script> 8 $(".smchild").wrap("<b>对呀！</b>"); 9 </script> 10 11 </body>
穿大衣：
执行wrapAll后的html结构：
1 <body> 2 <ul class="bigul"> 3 <b>对呀！ 4 <li class="smchild">我是一个小美女</li> 5 <li class="smchild">我是一个小美女</li> 6 <li class="smchild">我是一个小美女</li> 7 </b> 8 </ul> 9 <script> 10 $(".smchild").wrapAll("<b>对呀！</b>"); 11 </script> 12 </body>
今天总结先进行到这里，有内容有错误或者有疑问，评论里提问。
标签：
原文地址：http://www.cnblogs.com/roverliang/p/4666678.html
