Skip to content

Commit 03ae5df

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

File tree

6 files changed

+97
-185
lines changed

6 files changed

+97
-185
lines changed

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@
22

33
<head>
44
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5+
<style type="text/css">
6+
p{
7+
border: 1px solid red;
8+
}
9+
</style>
510
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
611
</head>
712

813
<body>
9-
<p>元素p1，默认给绑定一个点击事件</p>
10-
<p>元素p2，默认给绑定一个点击事件</p>
11-
<button>通过remove处理元素p1</button>
12-
<button>通过detach处理元素p2</button>
14+
<h3>给页面2个p元素节点绑定点击事件,点击后弹出自己本身的节点内容</h3>
15+
<p>元素p1，同时绑定点击事件</p>
16+
<p>元素p2，同时绑定点击事件</p>
17+
<h3>通过点击2个按钮后观察方法处理的区别</h3>
18+
<button>点击通过remove处理元素p1</button>
19+
<button>点击通过detach处理元素p2</button>
1320
</body>
1421
<script type="text/javascript">
1522
//给页面上2个p元素都绑定时间

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/empty的基本用法.html

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,29 @@
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+
div {
2610
background: #bbffaa;
27-
}
28-
29-
.right div {
30-
background: yellow;
11+
width: 300px;
3112
}
3213
</style>
3314
</head>
3415

3516
<body>
3617
<h2>通过empty移除元素</h2>
37-
<div class="left">
38-
<div class="aaron">点击通过jQuery的empty移除元素</div>
39-
</div>
40-
<div class="right">
41-
<div id="test"><p class="test1">移除p元素1</p><p class="test1">移除p元素2</p></div>
18+
<div id="test">
19+
<p>p元素1</p>
20+
<p>p元素2</p>
4221
</div>
43-
22+
<button>点击通过jQuery的empty移除元素</button>
4423
<script type="text/javascript">
45-
46-
$(".left .aaron:first").on('click', function() {
47-
//通过empty移除了当前div元素下的所有p元素
48-
//但是本身id=test的div元素没有被删除
49-
$("#test").empty()
50-
})
51-
24+
$("button").on('click', function() {
25+
//通过empty移除了当前div元素下的所有p元素
26+
//但是本身id=test的div元素没有被删除
27+
$("#test").empty()
28+
})
5229
</script>
53-
54-
5530
</body>
5631

5732
</html>

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/jQuery节点创建与属性的处理.html

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
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 {
@@ -34,47 +34,37 @@
3434

3535
<body>
3636
<h2>动态创建元素节点</h2>
37-
<div class="left">
38-
<div class="aaron">点击通过jQuery动态创建元素节点</div>
39-
</div>
37+
<button>点击通过jQuery动态创建元素节点</button>
4038
<script type="text/javascript">
39+
var $body = $('body');
40+
$body.on('click', function() {
41+
//通过jQuery生成div元素节点
42+
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
43+
$body.append(div)
44+
})
4145

42-
var $body = $('body');
4346

44-
$body.on('click',function(){
4547

46-
//通过jQuery生成div元素节点
47-
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
48-
49-
$body.append(div)
50-
})
48+
// var body = document.querySelector('body');
5149

50+
// document.addEventListener('click',function(){
5251

52+
// //创建2个div元素
53+
// var rightdiv = document.createElement('div')
54+
// var rightaaron = document.createElement("div");
5355

54-
// var body = document.querySelector('body');
55-
56-
// document.addEventListener('click',function(){
57-
58-
// //创建2个div元素
59-
// var rightdiv = document.createElement('div')
60-
// var rightaaron = document.createElement("div");
61-
62-
// //给2个div设置不同的属性
63-
// rightdiv.setAttribute('class', 'right')
64-
// rightaaron.className = 'aaron'
65-
// rightaaron.innerHTML = "动态创建DIV元素节点";
66-
67-
// //2个div合并成包含关系
68-
// rightdiv.appendChild(rightaaron)
69-
70-
// //绘制到页面body
71-
// body.appendChild(rightdiv)
72-
73-
// },false)
74-
56+
// //给2个div设置不同的属性
57+
// rightdiv.setAttribute('class', 'right')
58+
// rightaaron.className = 'aaron'
59+
// rightaaron.innerHTML = "动态创建DIV元素节点";
7560

61+
// //2个div合并成包含关系
62+
// rightdiv.appendChild(rightaaron)
7663

64+
// //绘制到页面body
65+
// body.appendChild(rightdiv)
7766

67+
// },false)
7868
</script>
7969
</body>
8070

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

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,37 @@
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>通过empty移除元素</h2>
37-
<div class="left">
38-
<div class="aaron">点击通过jQuery的empty移除元素</div>
39-
<div class="aaron">点击通过jQuery的empty移除指定元素3</div>
21+
<div class="test1">
22+
<p>p元素1</p>
23+
<p>p元素2</p>
4024
</div>
41-
<div class="right">
42-
<div id="test1">
43-
<p>移除p元素1</p>
44-
<p>移除p元素2</p>
45-
</div>
46-
<div id="test2">
47-
<p>移除p元素3</p>
48-
<p>移除p元素4</p>
49-
</div>
25+
<div class="test2">
26+
<p>p元素3</p>
27+
<p>p元素4</p>
5028
</div>
29+
<button>点击通过jQuery的empty移除元素</button>
30+
<button>点击通过jQuery的empty移除指定元素</button>
5131
<script type="text/javascript">
52-
$(".left .aaron:first").on('click', function() {
53-
//删除整个 id=test1的div节点
54-
$("#test1").remove()
32+
$("button:first").on('click', function() {
33+
//删除整个 class=test1的div节点
34+
$(".test1").remove()
5535
})
5636

57-
$(".left .aaron:last").on('click', function() {
37+
$("button:last").on('click', function() {
5838
//找到所有p元素中，包含了3的元素
5939
//这个也是一个过滤器的处理
6040
$("p").remove(":contains('3')")

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

Lines changed: 14 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,44 @@
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 {
9+
.content {
1110
width: 300px;
12-
height: 120px;
1311
}
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;
12+
.append{
13+
background-color: blue;
2314
}
24-
25-
.left div {
26-
background: #bbffaa;
27-
}
28-
29-
.right div {
30-
background: yellow;
15+
.appendTo{
16+
background-color: red;
3117
}
3218
</style>
3319
</head>
3420

3521
<body>
3622
<h2>通过append与appendTo添加元素</h2>
37-
<div class="left">
38-
<div class="aaron">点击通过jQuery的append添加元素</div>
39-
<div class="aaron">点击通过jQuery的appendTo添加元素</div>
40-
</div>
41-
<div class="right">
42-
</div>
23+
<button id="bt1">点击通过jQuery的append添加元素</button>
24+
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
25+
26+
<div class="content"></div>
4327

4428
<script type="text/javascript">
4529

46-
$(".left .aaron:first").on('click', function() {
47-
var right = $('.right')
30+
$("#bt1").on('click', function() {
4831
//.append(), 选择表达式在函数的前面，
4932
//参数是将要插入的内容。
50-
right.append('<div class="aaron">通过append方法添加的元素</div>')
33+
$(".content").append('<div class="append">通过append方法添加的元素</div>')
5134
})
5235

5336
</script>
5437

5538
<script type="text/javascript">
5639

57-
$(".left .aaron:last").on('click', function() {
58-
var right = $('.right')
40+
$("#bt2").on('click', function() {
5941
//.appendTo()刚好相反，内容在方法前面，
6042
//无论是一个选择器表达式 或创建作为标记上的标记
6143
//它都将被插入到目标容器的末尾。
62-
$('<div class="aaron">通过appendTo方法添加的元素</div>').appendTo(right)
44+
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
6345
})
6446

6547
</script>

0 commit comments

Comments
 (0)