少说话多撸码：
|
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>
<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>
|
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
