共计 3640 个字符，预计需要花费 10 分钟才能阅读完成。
1、外部插入
A.append(B) 将 B 插入到 A 的外部前面（之后的串联操作，操作 A）
| <A> | |
| .... | |
| <B></B> | |
| <A> |
A.prepend(B) 将 B 插入到 A 的外部后面
| <A> | |
| <B></B> | |
| .... | |
| <A> |
A.appendTo(B) 将 A 插入到 B 的外部前面（之后的串联操作，操作 A）
A.prependTo(B) 将 A 插入到 B 的外部后面
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>03_外部插入节点.html</title> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| </head> | |
| <body> | |
| <ul id="city"> | |
| <li id="bj" name="beijing"> 北京 </li> | |
| <li id="tj" name="tianjin"> 天津 </li> | |
| <li id="cq" name="chongqing"> 重庆 </li> | |
| </ul> | |
| <ul id="love"> | |
| <li id="fk" name="fankong"> 反恐 </li> | |
| <li id="xj" name="xingji"> 星际 </li> | |
| </ul> | |
| <div id="foo1">Hello1</div> | |
| </body> | |
| <script type="text/javascript"> | |
| // 将 tj 插入 到 love 外部 前 或后 | |
| var $tj = $("#tj"); | |
| var $love = $("#love"); | |
| // 后 | |
| // $love.append($tj); | |
| // $tj.appendTo($love); | |
| // 前 | |
| // $love.prepend($tj); | |
| $tj.prependTo($love); | |
| </script> | |
| </html> |
2、内部插入
A.after(B) , 将 B 插入到 A 前面（同级）
| <A></A> | |
| <B></B> |
A.before(B)，将 B 插入到 A 后面
| <B></B> | |
| <A></A> |
A.insertAfter(B) , 将 A 插入到 B 前面（同级）
| <B></B> | |
| <A></A> |
A.insertBefore(B) 将 A 插入到 B 后面
| <A></A> | |
| <B></B> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>04_内部插入节点.html</title> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| </head> | |
| <body> | |
| <ul id="city"> | |
| <li id="bj" name="beijing"> 北京 </li> | |
| <li id="tj" name="tianjin"> 天津 </li> | |
| <li id="cq" name="chongqing"> 重庆 </li> | |
| </ul> | |
| <p id="p3">I would like to say: p3</p> | |
| <p id="p2">I would like to say: p2</p> | |
| <p id="p1">I would like to say: p1</p> | |
| </body> | |
| <script type="text/javascript"> | |
| // 将 city 插入 到 p2 前或后 | |
| var $city = $("#city"); | |
| var $p2 = $("#p2"); | |
| // 后 | |
| // $p2.after($city); | |
| // $city.insertAfter($p2); | |
| // 前 | |
| // $p2.before($city); | |
| $city.insertBefore($p2); | |
| </script> | |
| </html> |
3、删除
empty() 清空标签体
remove() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都会被移除
detach() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都保留
l 绑定数据
data(name) 取得
data(name,value) 设置
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>05_删除节点.html</title> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
| </head> | |
| <body> | |
| <ul id="city"> | |
| <li id="bj" name="beijing"> 北京 <p> 海淀区 </p></li> | |
| <li id="tj" name="tianjin"> 天津 <p> 河西区 </p></li> | |
| <li id="cq" name="chongqing"> 重庆 </li> | |
| </ul> | |
| <p class="hello">Hello</p> how are <p>you?</p> | |
| </body> | |
| <script type="text/javascript"> | |
| // 将 city 移除，再追加 body 前面 | |
| //#1 绑定事件 | |
| $("#city").click(function(){alert("O(∩_∩)O~"); | |
| }); | |
| //#2 绑定数据 | |
| $("#city").data("itheima","就是屌"); | |
| //1 移除 | |
| var $city = $("#city").remove(); // 移除绑定的事件、移除绑定的数据 | |
| // var $city = $("#city").detach(); // 保留绑定的事件、保留绑定的数据 | |
| //2 追加 | |
| $("body").append($city); | |
| //#3 取得绑定的数据 | |
| alert($("#city").data("itheima")); | |
| </script> | |
| </html> |
4、复制
clone() 克隆
even：批示事件处理函数是否会被复制。V1.5 以上版本默认值是：false
| <body> | |
| <button class="save"> 保留 </button><br> | |
| <p> 段落 </p> | |
| </body> | |
| <script type="text/javascript"> | |
| $(".save").click(function(){var $new = $(this).clone(true); | |
| $("body").append($new); | |
| }); | |
| </script> |
5、替换
A.replaceWith(B)，应用 A 将 B 替换掉
A.replaceAll(B)，应用 B 将 A 替换掉
| <html> | |
| <p> 段落 </p> | |
| <p> 段落 </p> | |
| <p> 段落 </p> | |
| <button> 保留 </button> | |
| </html> | |
| <script type="text/javascript"> | |
| // $("p").replaceWith("<a>xxx</a> <br/>"); | |
| $("<a>xxx</a> <br/>").replaceAll("p"); | |
| </script> |
6、包裹
A.wrap(B)，应用 B 将每一个 A 进行包裹（多个 B）
| <B><A></A></B> | |
| <B><A></A></B> |
A.wrapAll(B)，应用 B 将所有 A 进行包裹（一个 B）
| <B> | |
| <A></A> | |
| <A></A> | |
| </B> |
A.wrapInner(B) , 应用 B 将每一个 A 的标签体包裹。
| <A><B>。。。</B></A> | |
| <A><B>。。。</B></A> |
A.unwrap()，将 A 的父元素删除，本人留着
| <body> | |
| <strong title="jQuery">jQuery</strong> | |
| <strong title="jQuery">jQuery</strong> | |
| </body> | |
| <script type="text/javascript"> | |
| // 每一个包 | |
| // $("strong").wrap("<div></div>"); | |
| // 一个包 | |
| // $("strong").wrapAll("<div></div>"); | |
| // 标签体 | |
| $("strong").wrapInner("<div></div>"); | |
| </script> |
正文完
发表至： javascript
2021-03-17
