学习笔记
1.JQuery添加节点相关方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery添加节点相关方法</title> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //**************************************************************内部插入 var $li = $("<li>我是新增的li</li>"); /** * 1.append:将A元素添加到指定元素B内部的最后 * B作为方法调用者 * A作为方法参数 */ $("button").click(function () { $("ul").append($li); }); /** * 2.appendTo:将A元素添加到指定元素B内部的最后 * A作为方法调用者 * B作为方法参数 */ $("button").click(function () { $li.appendTo("ul"); }); /** * 3.prepend:将A元素添加到指定元素B内部的最前面 * B作为方法调用者 * A作为方法参数 */ $("button").click(function () { $("ul").prepend($li); }); /** * 4.prependTo:将A元素添加到指定元素B内部的最前面 * A作为方法调用者 * B作为方法参数 */ $("button").click(function () { $li.prependTo("ul"); }); //**************************************************************外部插入 /** * 1.after:将A元素添加到指定元素B外部的后面 * B作为方法调用者 * A作为方法参数 */ $("button").click(function () { $("ul").after($li); }); /** * 2.insertAfter:将A元素添加到指定元素B外部的后面 * A作为方法调用者 * B作为方法参数 */ $("button").click(function () { $li.insertAfter("ul"); }); /** * 3.before:将A元素添加到指定元素B外部的前面 * B作为方法调用者 * A作为方法参数 */ $("button").click(function () { $("ul").before($li); }); /** * 4.insertBefore:将A元素添加到指定元素B外部的前面 * A作为方法调用者 * B作为方法参数 */ $("button").click(function () { $li.insertBefore("ul"); }); }); </script></head><body><button>添加节点</button><ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li></ul></body></html>
2.JQuery删除节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery删除节点</title> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //删除节点 /** * 1.remove方法:删除整个元素 */ $("button").click(function () { $("li").remove(".item"); $(".one").remove(); }); /** * 2.empty方法:清空元素的内容和子元素 */ $("button").click(function () { $(".two").empty(); }); /** * detach方法:和remove方法一模一样 */ }); </script></head><body><button>删除节点</button><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 class="one">我是div1</div><div class="two">我是div2 <span>我是span</span></div></body></html>
3.JQuery替换节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery替换元素</title> <script src="../jquery-1.12.4.js"></script> <script> $(function () { //替换元素 var $h6 = $("<h6>我是标题6</h6>") /** * 1.replaceWith方法:替换所有匹配的元素A为指定元素B * A为方法调用者,B为方法参数 */ $("button").click(function () { $("h1").replaceWith($h6); }); /** * 2.replaceAll方法:替换所有匹配的元素A为指定元素B * A为方法参数,B为方法调用者 */ $("button").click(function () { $h6.replaceAll("h1"); }); }); </script></head><body><button>替换元素</button><h1>我是标题1</h1><h1>我是标题1</h1><h1>我是标题1</h1><h1>我是标题1</h1><h1>我是标题1</h1></body></html>
4.JQuery节点的复制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery节点的复制</title> <script src="../jquery-1.12.4.js"></script> <script> $(function () { /** * clone(false):浅复制,只复制节点,不能复制事件 * clone(true):深复制,复制节点同时复制事件 */ $("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></head><body><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>
原文链接:http://www.cnblogs.com/cnmoti/p/10796418.html
本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728