一、jQuery操作DOM
内部插入操作：
append(content|fn)：向每个匹配的元素内部追加内容。
prepend(content)：向每个匹配的元素内部前置内容。
外部插入操作：
after(content|fn)：在每个匹配的元素之后插入内容。
before(content|fn)：在每个匹配的元素之前插入内容。
包裹操作：
wrap(html|element|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()：这个方法将移出元素的父元素。
wrapAll(html|ele)：将所有匹配的元素用单个元素包裹起来。
wrapInner(htm|element|fnl)：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
替换操作：
replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素。
删除操作：
empty()：删除匹配的元素集合中所有的子节点。
remove([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
复制操作：
clone(Even])：克隆匹配的DOM元素并且选中这些克隆的副本。
even：一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
<!DOCTYPE html> <html> <head> <meta charset=http://www.likecs.com/"UTF-8"> <title></title> <style type=http://www.likecs.com/"text/css"> .outer_one{ width: 80%; height: 80px; text-align: center; background: #ff0000; } .outer_one_child{ width: 100%; height: 50px; line-height: 50px; text-align: center; background: #00cd00; } .outer_four{ background: purple; } </style> </head> <body> <div class=http://www.likecs.com/"container"> <div class=http://www.likecs.com/"outer_one"> 第一个外边框 </div> <div class=http://www.likecs.com/"outer_one_child"> 第一个外边框的孩子——布局与第一个外边框同级 </div> <div class=http://www.likecs.com/"outer_two"> 第二个外边框 </div> <div class=http://www.likecs.com/"outer_three"> 第三个外边框 </div> <div class=http://www.likecs.com/"outer_four"> 第四个外边框 </div> <div class=http://www.likecs.com/"outer_five"> <p>第五个外边框</p> <p>第五个外边框</p> <a>第五个外边框</a> </div> <div class=http://www.likecs.com/"outer_six"> <p>第六个外边框</p> <a>第六个外边框</a> </div> <div class=http://www.likecs.com/"outer_seven"> <p>第七个外边框</p> <p>第七个外边框</p> <a>第七个外边框a标签<p>我是孙子p标签</p></a> <p>第七个外边框</p> </div> <div class=http://www.likecs.com/"outer_eight"> <p>第八个外边框</p> <a>第八个外边框<span>×</span></a> 第八个外边框 </div> <div class=http://www.likecs.com/"outer_nine"> <p>第九个外边框</p> <p>第九个外边框</p> <p>第九个外边框</p> <p>第九个外边框</p> </div> <div class=http://www.likecs.com/"outer_ten"> <p>第十个外边框</p> <p>第十个外边框</p> <p>第十个外边框</p> <a>第十个外边框</a> </div> <div class=http://www.likecs.com/"outer_11"> <p>第11个外边框</p> <p>第11个外边框</p> <p>第11个外边框</p> <a>第11个外边框</a> </div> <div class=http://www.likecs.com/"outer_12"> <p>第12个外边框</p> <p>第12个外边框</p> </div> <div class=http://www.likecs.com/"outer_13"> <p>第13个外边框</p> <p>第13个外边框</p> </div> <div class=http://www.likecs.com/"outer_14"> 第14个外边框 </div> <div class=http://www.likecs.com/"outer_15"> 第15个外边框 </div> <div class=http://www.likecs.com/"outer_16"> 第16个外边框 </div> <div class=http://www.likecs.com/"outer_17"> 第17个外边框 </div> </div> </body> <script src=http://www.likecs.com/"https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type=http://www.likecs.com/"text/javascript"> //内部插入（生成子元素） //append元素内部末尾追加内容(支持回调函数) $('.outer_one').append($('.outer_one_child'));//将现有标签追加到元素内 $('.outer_two').append('<p>');//向元素末尾追加新标签 //prepend元素内部开头追加内容 $('.outer_three').prepend('我是prepend追加的内容'); //外部插入（生成兄弟元素） $('.outer_four').before('<p>我是before刚插入的标签</p>') $('.outer_four').after('<p>我是after刚插入的标签</p>') //包裹操作wrap（添加父元素） unwrap(移除父元素) $('.outer_five p').wrap('<a>');//所有包含的元素外围包裹p标签 $('.outer_six p').unwrap('<p>');//去除父元素的包裹 //wrapAll将所有匹配的元素放到一起用一个规定的父元素包裹 $('.outer_seven p').wrapAll('<a>'); //wrapInner将子元素包裹 $('.outer_eight').wrapInner('<h3>'); //替换操作 //replaceWith将匹配的元素替换为规定的元素 $('.outer_nine p').replaceWith('<a>'); //replaceAll将匹配的元素替换为规定的元素 $('<p>').replaceAll('.outer_ten a'); //删除操作 $('.outer_11').empty(); // remove和detach的区别： //remove() dom中删除节点保留到jquery,元素保留，事件删除 //detach() dom中删除节点保留到jquery,元素保留，事件保留 $('.outer_12').click(function(){ $(this).css('background','green'); }).remove().appendTo('.outer_14'); $('.outer_13').click(function(){ $(this).css('background','red'); }).detach().appendTo('.outer_15'); //复制操作clone(even)方法的参数取值boolean如果true保留复制元素的绑定事件否则相反 $('.outer_16').clone().appendTo('.outer_17') </script> </html>