软件开发实际就是数据的增删改查，javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，以便看出jquery的强大：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script type="text/javascript" src="jq/jquery-1.9.1.js"></script><script type="text/javascript">$(function(){gaoliang();var $seldel = undefined;var seldel = undefined;//高亮选中function gaoliang() {$("li").click(function () {$("li").css("backgroundColor", "red");this.style.backgroundColor = "yellow";$seldel = $(this);seldel = this;});}//使用jquery添加对象$("#btnAdd1").click(function () {var input = window.prompt("输入数据");var $newli = $("<li>" + input + "</li>");$newli.appendTo("#Ol");gaoliang();});//使用dom元素添加对象document.getElementById("btnAdd2").onclick = function () {var input = window.prompt("输入数据");var newli = document.createElement("li");newli.innerHTML = input;document.getElementById("Ol").appendChild(newli);gaoliang();}//使用jquery删除对象$("#btnDel1").click(function () {$seldel.remove();});//使用dom元素删除对象document.getElementById("btnDel2").onclick = function () {seldel.parentNode.removeChild(seldel);}//使用jquery插入数据$("#btnInsert1").click(function () {var input=window.prompt("输入插入的数据");var $newli=$("<li>"+ input+"</li>");$newli.insertBefore($seldel);gaoliang();});//使用dom插入数据document.getElementById("btnInsert2").onclick = function () {var Ol = document.getElementById("Ol");var input = window.prompt("输入插入的数据");var newli = document.createElement("li");newli.innerHTML = input;Ol.insertBefore(newli, seldel);gaoliang();}//使用jquery编辑选中的数据$("#btnEdit1").click(function () {var oldtxt = $seldel.html();var $edit = $("<input id='btnE' type='text' value='" + oldtxt + "'/>");$seldel.html($edit);$edit.focus();$edit.blur(function () {var newtxt = $(this).val();$seldel.html(newtxt);});});//使用dom编辑选中的数据document.getElementById("btnEdit2").onclick = function () {var edittext = document.createElement("input");edittext.type = "text";edittext.value = seldel.innerHTML;;seldel.innerHTML = "";seldel.appendChild(edittext);edittext.focus();edittext.onblur = function () {seldel.innerHTML = edittext.value;}}} )</script></head><body><ol id="Ol"><li id="haha">1</li><li>2</li><li>3</li><li>4</li></ol><input id="btnAdd1" type="button" value="jquery添加数据" /><input id="btnAdd2" type="button" value="dom添加数据" /><input id="btnDel1" type="button" value="jquery删除数据" /><input id="btnDel2" type="button" value="dom删除数据" /><input id="btnInsert1" type="button" value="jquery插入数据" /><input id="btnInsert2" type="button" value="dom插入数据" /><input id="btnEdit1" type="button" value="jquery编辑数据" /><input id="btnEdit2" type="button" value="dom编辑数据" /></body></html> |
