jQuery第三十一篇增删替换复制

发布时间：2020-08-14 22:34:37 ，浏览量：2

//增

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="./jquery-1.10.1.min.js"></script> </head> <body> <script> $(function() { $("button").click(function() { var $li=$("
		
			李文
		
"); //增加节点 /*$("ul").append($li);//后面
                $("ul").prepend($li);//前面
                */ //$li.appendTo("ul"); //$li.prependTo("ul"); //$("ul").after($li); // $("ul").before($li); //$li.insertAfter("ul"); 核心:注意一下多的话，会覆盖的哦 }); }); </script> <button>添加节点</button> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> </ul> <div>我是div</div> </body> </html>

//删除

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="./jquery-1.10.1.min.js"></script> </head> <body> <script> $(function() { $("button").click(function() { //$("div").remove();//删除div,包括里面的内容 //$("div").empty();//删除div里面的内容,不删除div // 利用remove方法删除之后,删掉remove那段,再浏览器里面刷新,然后事件无法响应 // 但是利用detach事件可以响应哦 //$("div").detach(); }); }); </script> <button>删除节点</button> <ul> <li class="item">我是第1个li</li> <li>我是第2个li</li> <li class="item">我是第3个li</li> <li>我是第4个li</li> <li class="item">我是第5个li</li> </ul> <div>我是div <p>我是段落</p> </div> </body> </html>

//替换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="./jquery-1.10.1.min.js"></script> </head> <body> <script> $(function() { $("button").click(function() { var $h6=$("
		
			我是标题
		
"); //$("h1").replaceWith($h6); //$h6.replaceAll("h1"); }); }); </script> <button>替换节点</button> <h1>我是标题1</h1> <h1>我是标题1</h1> <p>我是段落</p> </body> </html>

//复制

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="./jquery-1.10.1.min.js"></script> </head> <body> <script> $(function() { $("button").eq(0).click(function() { //浅复制 var $li=$("li:first").clone(false); $("ul").append($li); }); $("button").eq(1).click(function() { //深复制 var $li=$("li:first").clone(true); $("ul").append($li); }); $("li").click(function() { alert($(this).html()); }); }); </script> <button>浅复制节点</button> <button>深复制节点</button> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul> </body> </html>

关注

打赏

1653961664

查看更多评论

jQuery第三十一篇增删替换复制

最近更新

热门博客

[ 申请 ]友情链接：

jQuery第三十一篇 增 删 替换 复制

最近更新

热门博客

[ 申请 ]友情链接：

jQuery第三十一篇增删替换复制