1 jQuery文档处理 2 3 1: 内部插入 4 5 A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A） 6 7 <A> 8 .... 9 <B></B> 10 <A> 11 A.prepend(B) 将B插入到A的内部前面 12 13 <A> 14 <B></B> 15 .... 16 <A> 17 A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A） 18 A.prependTo(B) 将A插入到B的内部前面 19 20 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 21 <html> 22 <head> 23 <title>内部插入节点.html:添加子节点</title> 24 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 25 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 26 </head> 27 28 <body> 29 <ul id="city"> 30 <li id="bj" name="beijing">北京</li> 31 <li id="tj" name="tianjin">天津</li> 32 <li id="cq" name="chongqing">重庆</li> 33 </ul> 34 35 36 <ul id="love"> 37 <li id="fk" name="fankong">反恐</li> 38 <li id="xj" name="xingji">星际</li> 39 </ul> 40 41 <div id="foo1">Hello1</div> 42 43 </body> 44 <script type="text/javascript"> 45 $(document).ready(function(){ 46 //把城市天津加入到love的最后 47 var $tj = $("#tj"); 48 var $love = $("#love"); 49 //$love.append($tj); 50 //$tj.appendTo($love); 51 52 //把城市天津加入到love的前面 53 $love.prepend($tj); 54 //$tj.prependTo($love); 55 }); 56 </script> 57 </html> 58 2: 外部插入 59 60 A.after(B) , 将B插入到A后面（同级） 61 62 <A></A> 63 <B></B> 64 A.before(B) ，将B插入到A前面 65 66 <B></B> 67 <A></A> 68 A.insertAfter(B) , 将A插入到B后面（同级） 69 70 <B></B> 71 <A></A> 72 A.insertBefore(B) 将A插入到B前面 73 74 <A></A> 75 <B></B> 76 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 77 <html> 78 <head> 79 <title>04_外部插入节点.html:添加兄弟节点</title> 80 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 81 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 82 </head> 83 84 <body> 85 <ul id="city"> 86 <li id="bj" name="beijing">北京</li> 87 <li id="tj" name="tianjin">天津</li> 88 <li id="cq" name="chongqing">重庆</li> 89 </ul> 90 91 <p id="p3">I would like to say: p3</p> 92 93 <p id="p2">I would like to say: p2</p> 94 95 <p id="p1">I would like to say: p1</p> 96 97 </body> 98 <script type="text/javascript"> 99 $(document).ready(function(){ 100 var $city = $("#city"); 101 var $p2 = $("#p2"); 102 //把city插入到p2前面 103 //$p2.before($city); 104 //$city.insertBefore($p2); 105 106 //把city插入到p2后面 107 //$p2.after($city); 108 $city.insertAfter($p2); 109 }); 110 </script> 111 </html> 112 删除 113 114 empty() 清空标签体 115 remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除 116 detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留 117 118 绑定数据 119 data(name) 获得 120 data(name,value) 设置 121 122 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 123 <html> 124 <head> 125 <title>05_删除节点.html</title> 126 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 127 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 128 </head> 129 130 <body> 131 <ul id="city"> 132 <li id="bj" name="beijing">北京<p>海淀区</p></li> 133 <li id="tj" name="tianjin">天津<p>河西区</p></li> 134 <li id="cq" name="chongqing">重庆</li> 135 </ul> 136 <p class="hello">Hello</p> how are <p>you?</p> 137 </body> 138 <script type="text/javascript"> 139 $(document).ready(function(){ 140 //绑定事件 141 $("#city").click(function(){ 142 alert("city"); 143 }); 144 //绑定数据 145 $("#city").data("dly","beautiful"); 146 //alert($("#city").data("dly")); 147 //删除的同时会返回被删除的对象 148 //var $city = $("#city").remove();//对象绑定的事件不会保留,绑定的数据也不会保留 149 var $city = $("#city").detach();//对象绑定的事件会保留,绑定的数据也会保留 150 //再次使用$city 151 $("body").prepend($city); 152 alert($city.data("dly")); 153 }); 154 </script> 155 </html>