1 示例：节点操作
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>节点操作</title>
7 </head>
8 <body>
9 <ul>
10 <li>三个小时都没有吃肉了，我要吃肉啊啊啊啊啊啊啊啊啊啊！！！！！<a href="#"> 删除</a></li>
11 <li>四个小时都没有吃肉了，我要吃肉啊啊啊！！！！！<a href="#" id="i2"> 删除</a></li>
12 </ul>
13 <input type="button" id="add" value="添加">
14 <input type="button" id="empty" value="清空">
15 <input type="button" id="remove" value="删除">
16 <input type="button" id="detach" value="删除detach">
17 </body>
18
19 <script src="../js/jquery-1.8.3.min.js"></script>
20 <script>
21 var count = 0;
22 $(function() {
23 $("#empty").click(function () {
24 /*清空ul标签中内容*/
25 $("ul").empty();
26 });
27 $("#remove").click(function () {
28 /*删除节点,连ul节点都删除了*/
29 $("ul>li:eq(0)").remove();
30 });
31 $("#detach").click(function () {
32 /*删除整个节点，保留元素的绑定事件、附加的数据*/
33 $("ul>li:last-of-type").detach();
34 });
35 $("#add").click(function () {
36 count++;
37 console.info(count)
38 var $node;
39 if (count == 1){
40 $node = $("<li>我是小妖怪<a href='#'> 删除</a></li>");
41 /*将新增的内容追加到父元素中的最后一个*/
42 $node.appendTo($("ul"));
43 }
44 else if(count == 2){
45 $node = $("<li>逍遥又自在<a href='#'> 删除</a></li>");
46 /*将新增的内容追加到父元素中的第一个*/
47 $node.prependTo($("ul"));
48 }
49 else if(count == 3){
50 $node = $("<li>杀人不眨眼<a href='#'> 删除</a></li>");
51 /*将新增元素追加到每一个同辈元素中的前面（数量根据同辈元素有几个决定）*/
52 $node.insertBefore($("li"));
53 }
54 else if(count == 4){
55 $node = $("<li>吃人不放盐<a href='#'> 删除</a></li>");
56 /*将新增元素追加到所有的同辈元素的后面（数量根据同辈元素有几个决定）*/
57 $node.insertAfter($("li"));
58 }
59 else if(count == 5){
60 $node = $("<li>一口七八个<a href='#'> 删除</a></li>");
61 /*新增的节点替换 前面全部的节点*/
62 $node.replaceAll($("li"));
63 }
64 else if(count == 6){
65 $node = $("<li>肚皮要撑破<a href='#'> 删除</a></li>");
66 /*新增的节点将前面的节点全部替换，只剩下一个新增的节点*/
67 $("li").replaceWith($node);
68 }
69 else if(count == 7){
70 $node = $("<li>茅房去拉屎<a href='#'> 删除</a></li>");
71 /*拷贝指定位置的节点到指定的位置*/
72 $("ul:eq(0)").clone(true).appendTo("ul");
73 }
74 else if(count == 8){
75 $node = $("<li>想起忘带纸<a href='#'> 删除</a></li>");
76 }else{
77 $node = $("<li>生活你全是泪，没死就得活受罪，越是折腾越倒霉，越有追求越悲催，垂死挣扎你累不累，不如瘫在床上睡。来来回回千百遍，小爷也是很疲倦” <a href='#'>删除</a></li>");
78 }
79 $node.appendTo($("ul"));
80 /*必须要放在新增的函数里面，才可以将新增的删除父节点*/
81 $("a").live("click",function () {
82 $(this).parent().remove();
83 });
84
85 });
86 });
87
88 </script>
89 </html>
1 示例：节点操作二（HTML部分） 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>金盆洗脚城</title> 7 <link rel="stylesheet" type="text/css" href="../css/demo3.css"> 8 </head> 9 <body> 10 <table> 11 <tr> 12 <td><input type="checkbox"></td> 13 <td>姓名</td> 14 <td>性别</td> 15 <td>卡号</td> 16 <td>会员级别</td> 17 <td>电话号码</td> 18 <td>出生年月日</td> 19 <td>消费金额</td> 20 <td>操作</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox"></td> 24 <td>小三</td> 25 <td>男</td> 26 <td>465465465546</td> 27 <td>段工</td> 28 <td>132132132</td> 29 <td>2018/11/12</td> 30 <td>5555</td> 31 <td> 32 <img src="../img/update.jpg"> 33 <img src="../img/ok.jpg"> 34 <img src="../img/del.jpg"> 35 </td> 36 </tr> 37 </table> 38 </body> 39 <script src="../js/jquery-1.8.3.min.js"></script> 40 <script src="../js/demo3.js"></script> 41 </html>
1 JS部分
2 $(function () {
3 //给偶数行与奇数行添加背景
4 $("tr:even").css("background-color","bisque");
5 $("tr:odd").css("background-color","aliceblue");
6 //删除
7 $("[src*='del']").bind("click",function () {
8 $(this).parent().parent().remove();
9
10 //给偶数行与奇数行添加背景
11 $("tr:even").css("background-color","bisque");
12 $("tr:odd").css("background-color","aliceblue");
13
14 });
15
16 //页面加载出来，ok隐藏
17 $("img[src*='ok']").hide();
18 //点击修改图片，修改图片隐藏，显示ok图片
19 $("[src*='update']").click(function () {
20 $(this).hide();//隐藏自身
21 //显示ok
22 $(this).next().show();
23 //找到电话号码那个td
24 var $td = $(this).parent().prev().prev().prev();
25 //找到td中的值"+$td.text()+"
26 var $input = "<input type='text' style='color: red;font-size: 20px;text-align: center' value='"+$td.text()+"' />";
27 //新增input
28 $td.html($input);
29 });
30
31 //点击保存，隐藏保存，显示修改图片
32 $("[src*='ok']").on("click",function () {
33 $(this).parent().prev().prev().prev().text($(this).parent().prev().prev().prev().children().val());
34 $(this).hide();
35 $(this).prev().show();
36 });
37
38
39 //第一行的tr字体变大
40 $("tr:eq(0)").css({"font-size":"30px","color":"red"});
41 });
1 css部分
2 table{
3 border-collapse: collapse;
4 margin: 0px auto;
5 text-align: center;
6 width: 1500px;
7 }