开发者学堂课程【jQuery 开发教程：jQuery_DOM 移除、DOM 替换】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4296
jQuery_DOM 移除、DOM 替换
目录：
一、DOM 移除 detach 方法
二、DOM 移除 empty 方法
三、DOM 移除 remove 方法
四、DOM 移除 unwrap 方法
五、DOM 替换 replaceAll 方法
六、DOM 替换 replaceWith 方法
一、DOM 移除
有四个方法
1、detach()
从 DOM 中去掉所有匹配的元素。
创建一个新的 html 文件，命名为 detach,引入 jquery
示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title></title> <script src="jquery-2.2.1.min.js"></script></ head> <body> //删除所有p标签 <p calss=”p1”>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p><script> //文档加载，选择到p标签，不写参数就会移除掉所有p标签 $ ( function(){ //不写参数将会移除所有 $ ("p").detach(“.p1”);}) < /script> < / body> < / html>
执行结果：
Body里面没有任何元素，说明p标签已经被全部移除了
2、empty()
从DOM中移除集合中匹配元素的所有子节点。
<div class="container"> <div> <div> <p class="p1">哈哈哈哈</p></ div> < / div> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p> </ div>
执行结果：
只有一个空的盒子
3、remove()
将匹配元素集合从DOM中删除。 (注:同时移除元素上的事件及jQuery数据)
4、unwrap()
将匹配元素集合的父级元素删除，保留自身(和兄弟元索,如果存在)在原来的位置
<! DOCTYPE html > <html lang ="en”> <head> <meta charset ="UTF-8"> <title></title> <scriptsrc="http://apps,bdimg. . com/libs/jquery-2.1.4/jquery.min.js"></script> <style> <head> <body> <div class=”container”> <div> <div> <p class =”p1”>哈哈哈哈</p> </div> </div> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <p>哈哈哈哈</p> </div> <script> $(function(){ $(“p”).detach(“.p1”); $(“.container”).empty(); })
执行效果：
二、DOM替换
1、replaceAll()
用集合的匹配元素替换每个目标元素。
2、replaceWith()
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
<! DOCTYPE html > <html lang ="en”> <head> <meta charset ="UTF-8"> <title></title> <scriptsrc="http://apps,bdimg. . com/libs/jquery-2.2.1./jquery.min.js"></script> <head> <body> <div class=”container”> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> </div> <script> $(function(){ $(“<span>233</span>”).replaceAll（$(“p”)）; })
