Skip to content

Commit 40b4975

Browse files
JsAaronJsAaron
committed
dom操作
1 parent 03ae5df commit 40b4975

File tree

5 files changed

+78
-122
lines changed

5 files changed

+78
-122
lines changed

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/detach()的有参用法和无参用法.html

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,38 @@
22

33
<head>
44
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5-
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
6-
<script type="text/javascript">
7-
$(document).ready(function() {
8-
9-
$('p').click(function(e) {
10-
alert(e.target.innerHTML)
11-
})
12-
var p
13-
$("button:first").click(function() {
14-
if(!$("p").length) return; //去重
15-
//通过detach方法删除元素
16-
//只是页面不可见，但是这个节点还是保存在内存中
17-
//数据与事件都不会丢失
18-
p = $("p").detach()
19-
});
20-
21-
$("button:last").click(function() {
22-
//把p元素在添加到页面中
23-
//事件还是存在
24-
$("body").append(p);
25-
});
26-
27-
});
28-
</script>
5+
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
6+
<style type="text/css">
7+
p {
8+
color: red;
9+
}
10+
</style>
2911
</head>
3012

3113
<body>
3214
<p>P元素1，默认给绑定一个点击事件</p>
3315
<p>P元素2，默认给绑定一个点击事件</p>
34-
<button>点击删除 p 元素</button>
35-
<button>点击移动 p 元素</button>
16+
<button id="bt1">点击删除 p 元素</button>
17+
<button id="bt2">点击移动 p 元素</button>
18+
<script type="text/javascript">
19+
$('p').click(function(e) {
20+
alert(e.target.innerHTML)
21+
})
22+
var p;
23+
$("#bt1").click(function() {
24+
if (!$("p").length) return; //去重
25+
//通过detach方法删除元素
26+
//只是页面不可见，但是这个节点还是保存在内存中
27+
//数据与事件都不会丢失
28+
p = $("p").detach()
29+
});
30+
31+
$("#bt2").click(function() {
32+
//把p元素在添加到页面中
33+
//事件还是存在
34+
$("body").append(p);
35+
});
36+
</script>
3637
</body>
3738

3839
</html>

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/empty和remove区别.html

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
<head>
55
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
66
<title></title>
7-
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
7+
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
88
<style>
99
.left,
1010
.right {
1111
width: 300px;
12-
height: 120px;
1312
}
1413

1514
.left div,
@@ -35,26 +34,26 @@
3534
<body>
3635
<h2>通过empty与remove移除元素</h2>
3736
<div class="left">
38-
<div class="aaron">点击通过jQuery的empty移除内部P元素</div>
39-
<div class="aaron">点击通过jQuery的remove移除整个节点</div>
37+
<button id="bt1">点击通过jQuery的empty移除内部P元素</button>
38+
<button id="bt2">点击通过jQuery的remove移除整个节点</button>
4039
</div>
4140
<div class="right">
4241
<div id="test1">
43-
<p>移除p元素1</p>
44-
<p>移除p元素2</p>
42+
<p>p元素1</p>
43+
<p>p元素2</p>
4544
</div>
4645
<div id="test2">
47-
<p>移除p元素3</p>
48-
<p>移除p元素4</p>
46+
<p>p元素3</p>
47+
<p>p元素4</p>
4948
</div>
5049
</div>
5150
<script type="text/javascript">
52-
$(".left .aaron:first").on('click', function() {
51+
$("#bt1").on('click', function() {
5352
//删除了2个p元素，但是本着没有删除
5453
$("#test1").empty()
5554
})
5655

57-
$(".left .aaron:last").on('click', function() {
56+
$("#bt2").on('click', function() {
5857
//删除整个节点
5958
$("#test2").remove()
6059
})

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/内部插入prepend()与prependTo().html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,15 @@
66
<title></title>
77
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
88
<style>
9+
.aaron1{
10+
border: 1px solid red;
11+
}
912
.aaron1 p {
1013
color: red;
1114
}
15+
.aaron2{
16+
border: 1px solid blue;
17+
}
1218
.aaron2 p {
1319
color: blue;
1420
}

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/外部插入after()与before().html

Lines changed: 17 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,36 @@
44
<head>
55
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
66
<title></title>
7-
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
7+
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
88
<style>
9-
.left,
10-
.right {
11-
width: 300px;
12-
height: 120px;
13-
}
14-
15-
.left div,
16-
.right div {
17-
width: 100px;
18-
height: 90px;
19-
padding: 5px;
20-
margin: 5px;
21-
float: left;
22-
border: 1px solid #ccc;
23-
}
24-
25-
.left div {
26-
background: #bbffaa;
27-
}
28-
29-
.right div {
30-
background: yellow;
9+
.aaron{
10+
border: 1px solid red;
3111
}
3212
</style>
3313
</head>
3414

3515
<body>
3616
<h2>通过before与after添加元素</h2>
37-
<div class="left">
38-
<div class="aaron">点击通过jQuery的before添加元素</div>
39-
<div class="aaron">点击通过jQuery的after添加元素</div>
17+
<button id="bt1">点击通过jQuery的before添加元素</button>
18+
<button id="bt2">点击通过jQuery的after添加元素</button>
19+
<div class="aaron">
20+
<p class="test1">测试before</p>
4021
</div>
41-
<div class="right">
42-
<div class="aaron"><p class="test1">测试before</p></div>
43-
<div class="aaron"><p class="test2">测试after</p></div>
22+
<div class="aaron">
23+
<p class="test2">测试after</p>
4424
</div>
45-
4625
<script type="text/javascript">
47-
48-
$(".left .aaron:first").on('click', function() {
49-
//在匹配test1元素集合中的每个元素前面插入p元素
50-
$(".test1").before('<p style="color:red">before增加的p元素之前</p>','<p style="color:red">多参数</p>')
51-
})
52-
26+
$("#bt1").on('click', function() {
27+
//在匹配test1元素集合中的每个元素前面插入p元素
28+
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
29+
})
5330
</script>
54-
5531
<script type="text/javascript">
32+
$("#bt2").on('click', function() {
33+
//在匹配test1元素集合中的每个元素后面插入p元素
34+
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
5635

57-
$(".left .aaron:last").on('click', function() {
58-
//在匹配test1元素集合中的每个元素后面插入p元素
59-
$(".test2").after('<p style="color:blue">after增加的p元素之后</p>','<p style="color:blue">多参数</p>')
60-
})
61-
36+
})
6237
</script>
63-
6438
</body>
6539

66-
</html>

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/外部插入insertAfter()与insertBefore().html

Lines changed: 19 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,65 +4,42 @@
44
<head>
55
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
66
<title></title>
7-
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
7+
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
88
<style>
9-
.left,
10-
.right {
11-
width: 300px;
12-
height: 120px;
13-
}
14-
15-
.left div,
16-
.right div {
17-
width: 100px;
18-
height: 90px;
19-
padding: 5px;
20-
margin: 5px;
21-
float: left;
22-
border: 1px solid #ccc;
23-
}
24-
25-
.left div {
9+
.test1 {
2610
background: #bbffaa;
2711
}
2812

29-
.right div {
13+
.test2 {
3014
background: yellow;
3115
}
3216
</style>
3317
</head>
3418

3519
<body>
3620
<h2>通过insertBefore与insertAfter添加元素</h2>
37-
<div class="left">
38-
<div class="aaron">点击通过jQuery的insertBefore添加元素</div>
39-
<div class="aaron">点击通过jQuery的insertAfter添加元素</div>
21+
<button id="bt1">点击通过jQuery的insertBefore添加元素</button>
22+
<button id="bt2">点击通过jQuery的insertAfter添加元素</button>
23+
<div class="aaron">
24+
<p class="test1">测试insertBefore,不支持多参数</p>
4025
</div>
41-
<div class="right">
42-
<div class="aaron"><p class="test1">测试insertBefore,不支持多参数</p></div>
43-
<div class="aaron"><p class="test2">测试insertAfter,不支持多参数</p></div>
26+
<div class="aaron">
27+
<p class="test2">测试insertAfter,不支持多参数</p>
4428
</div>
45-
4629
<script type="text/javascript">
47-
48-
$(".left .aaron:first").on('click', function() {
49-
//在test1元素前后插入集合中每个匹配的元素
50-
//不支持多参数
51-
$('<p style="color:red">before增加的p元素之前</p>','<p style="color:red">多参数</p>').insertBefore($(".test1"))
52-
})
53-
30+
$("#bt1").on('click', function() {
31+
//在test1元素前后插入集合中每个匹配的元素
32+
//不支持多参数
33+
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
34+
})
5435
</script>
55-
5636
<script type="text/javascript">
57-
58-
$(".left .aaron:last").on('click', function() {
59-
//在test2元素前后插入集合中每个匹配的元素
60-
//不支持多参数
61-
$('<p style="color:red">before增加的p元素之前</p>','<p style="color:red">多参数</p>').insertAfter($(".test2"))
62-
})
63-
37+
$("#bt2").on('click', function() {
38+
//在test2元素前后插入集合中每个匹配的元素
39+
//不支持多参数
40+
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
41+
})
6442
</script>
65-
6643
</body>
6744

6845
</html>

0 commit comments

Comments
 (0)