Skip to content

Commit 50f1931

Browse files
JsAaronJsAaron
committed
Merge branch 'master' of https://github.com/JsAaron/jQuery 
2 parents 0b21664 + f741bb4 commit 50f1931

39 files changed

+628
-632
lines changed

‎README.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ jQuery架构设计与实现（2.1.4版本）
33
-----------------------------------
44
###
55
市面上的jQuery书太多了,良莠不齐,看了那么多总觉得少点什么
6-
对"干货"，我不喜欢就事论事的写代码
7-
我想把自己所学的知识点，代码技巧，设计思想，代码模式能很好的表达出来
8-
所以考虑通过分析jQuery的源码库的方式来表达，尽力做最好
9-
内容结构还在不断的修正，欢迎给出建议…
6+
对"干货"，我不喜欢就事论事的写代码,我想把自己所学的知识点，代码技巧，设计思想，代码模式能很好的表达出来,所以考虑通过分析jQuery的源码库的方式来表达，尽力做最好
7+
内容结构还在不断的修正，欢迎给出建议
108

119
### 本书围绕的几个核心点：
1210
1. 设计理念

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM包裹wrap()方法.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +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>
9-
.left,
10-
.right {
11-
width: 250px;
12-
height: 120px;
13-
}
14-
159
.left div,
1610
.right div {
1711
width: 100px;
18-
height: 120px;
1912
padding: 5px;
2013
margin: 5px;
2114
float: left;
@@ -26,15 +19,22 @@
2619
.right div {
2720
background: yellow;
2821
}
22+
23+
p {
24+
background-color: red;
25+
}
26+
27+
a {
28+
background-color: blue;
29+
}
2930
</style>
3031
</head>
3132

32-
3333
<body>
3434
<h2>DOM包裹wrap()方法</h2>
3535
<div class="left">
36-
<div class="aaron1">点击,通过wrap方法给p元素增加父容器div</div>
37-
<div class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</div>
36+
<button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>
37+
<button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</div>
3838
</div>
3939
<div class="right">
4040
<p>p元素</p>

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM包裹wrapAll()方法.html

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
.left div,
1616
.right div {
1717
width: 100px;
18-
height: 120px;
18+
/*height: 120px;*/
1919
padding: 5px;
2020
margin: 5px;
2121
float: left;
@@ -26,10 +26,17 @@
2626
.right div {
2727
background: yellow;
2828
}
29+
30+
p {
31+
border: 1px solid red;
32+
}
33+
34+
a {
35+
border: 1px solid blue;
36+
}
2937
</style>
3038
</head>
3139

32-
3340
<body>
3441
<h2>DOM包裹wrapAll()方法</h2>
3542
<div class="left">
@@ -44,12 +51,10 @@ <h2>DOM包裹wrapAll()方法</h2>
4451
<a>a元素</a>
4552
<a>a元素</a>
4653
</div>
47-
48-
4954
<script type="text/javascript">
5055
$(".aaron1").on('click', function() {
5156
//给所有p元素，增加父容器div
52-
$('p').wrapAll('<div></div>');
57+
$('p').wrapAll('<div></div>');
5358
})
5459
</script>
5560
<script type="text/javascript">

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM拷贝clone().html

Lines changed: 4 additions & 3 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 {
@@ -29,7 +29,7 @@
2929
<h2>通过clone克隆元素</h2>
3030
<div class="left">
3131
<div class="aaron1">点击,clone浅拷贝</div>
32-
<div class="aaron2">点击,clone深拷贝</div>
32+
<div class="aaron2">点击,clone深拷贝,可以继续出发事件</div>
3333
</div>
3434
<script type="text/javascript">
3535
//只克隆节点
@@ -43,7 +43,8 @@ <h2>通过clone克隆元素</h2>
4343
//克隆节点
4444
//克隆事件
4545
$(".aaron2").on('click', function() {
46-
$(".left").append($(this).clone(true).css('color','blue'))
46+
console.log(1)
47+
$(".left").append( $(this).clone(true).css('color','blue') )
4748
})
4849
</script>
4950
</body>

‎慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM替换replaceWith()和replaceAll().html

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,7 @@
66
<title></title>
77
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.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: 120px;
19-
padding: 5px;
20-
margin: 5px;
21-
float: left;
22-
border: 1px solid #ccc;
23-
background: #bbffaa;
24-
}
25-
9+
2610
.right div {
2711
background: yellow;
2812
}
@@ -32,8 +16,8 @@
3216
<body>
3317
<h2>replaceWith()和replaceAll()</h2>
3418
<div class="left">
35-
<div class="aaron1">点击,通过replaceWith替换内容</div>
36-
<div class="aaron2">点击,通过rreplaceAll替换内容</div>
19+
<button class="bt1">点击,通过replaceWith替换内容</button>
20+
<button class="bt2">点击,通过rreplaceAll替换内容</button>
3721
</div>
3822
<div class="right">
3923
<div>
@@ -50,7 +34,7 @@ <h2>replaceWith()和replaceAll()</h2>
5034
<script type="text/javascript">
5135
//只克隆节点
5236
//不克隆事件
53-
$(".aaron1").on('click', function() {
37+
$(".bt1").on('click', function() {
5438
//找到内容为第二段的p元素
5539
//通过replaceWith删除并替换这个节点
5640
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
@@ -59,7 +43,7 @@ <h2>replaceWith()和replaceAll()</h2>
5943
<script type="text/javascript">
6044
//找到内容为第六段的p元素
6145
//通过replaceAll删除并替换这个节点
62-
$(".aaron2").on('click', function() {
46+
$(".bt2").on('click', function() {
6347
$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
6448
})
6549
</script>

‎慕课网教程案例/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的节点操作/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的节点操作/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>

0 commit comments

Comments
 (0)