jquery文档操作

  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>