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>
