Skip to content

Commit cc25bb5

Browse files
JsAaronJsAaron
committed
query鼠标操作
1 parent 29a2eed commit cc25bb5

File tree

4 files changed

+136
-113
lines changed

4 files changed

+136
-113
lines changed

‎慕课网教程案例/jQuery入门教程/jQuery鼠标事件/click()事件.html

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,45 +5,24 @@
55
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
66
<title></title>
77
<style>
8-
.left div,
9-
.right div {
10-
width: 500px;
11-
height: 50px;
12-
padding: 5px;
13-
margin: 5px;
14-
float: left;
15-
border: 1px solid #ccc;
16-
}
17-
18-
.left div {
8+
.test2 {
199
background: #bbffaa;
2010
}
21-
22-
.right div {
11+
.test3 {
2312
background: yellow;
2413
}
14+
.test2,.test3{
15+
border: 1px solid red;
16+
}
2517
</style>
2618
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
2719
</head>
2820

2921
<body>
3022
<h2>.click()方法</h2>
31-
<div class="left">
32-
<div class="aaron">
33-
<p>$('button:first').click(function(e) {alert(this)})</p>
34-
</div>
35-
</div>
36-
<div class="right">
37-
<div class="aaron">
38-
<p>$('.right').click(1111, set)</p>
39-
</div>
40-
</div>
41-
<button>绑定事件this</button>
42-
<button>指定触发事件</button>
43-
<button>不同函数传递数据</button>
44-
45-
4623

24+
<h4>测试一</h4>
25+
<button>元素绑定事件,弹出回调中的this</button>
4726
<script type="text/javascript">
4827
//this指向button元素
4928
$("button:eq(0)").click(function() {
@@ -52,20 +31,30 @@ <h2>.click()方法</h2>
5231
</script>
5332

5433

55-
<script type="text/javascript">
5634

35+
<h4>测试二</h4>
36+
<div class="test2">
37+
<p>$('button:first').click(function(e) {alert(this)})</p>
38+
</div>
39+
<button>指定触发事件</button>
40+
<script type="text/javascript">
5741
$('p').click(function(e) {
5842
alert(e.target.textContent)
5943
})
60-
6144
//this指向button元素
6245
$("button:eq(1)").click(function() {
6346
$('p').click() //指定触发绑定的事件
6447
})
65-
6648
</script>
6749

6850

51+
52+
<h4>测试三</h4>
53+
<div class="test3">
54+
<p>$('.right').click(1111, set)</p>
55+
</div>
56+
57+
<button>不同函数传递数据</button>
6958
<script type="text/javascript">
7059

7160
//不同函数传递数据
@@ -79,6 +68,10 @@ <h2>.click()方法</h2>
7968
a();
8069

8170
</script>
71+
72+
73+
74+
8275
</body>
8376

8477
</html>

‎慕课网教程案例/jQuery入门教程/jQuery鼠标事件/mousedown事件.html

Lines changed: 37 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,70 @@
55
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
66
<title></title>
77
<style>
8-
.left div,
9-
.right div {
10-
width: 500px;
11-
height: 50px;
12-
padding: 5px;
13-
margin: 5px;
14-
float: left;
15-
border: 1px solid #ccc;
16-
}
17-
18-
.left div {
8+
.test2 {
199
background: #bbffaa;
2010
}
2111

22-
.right div {
12+
.test3 {
2313
background: yellow;
2414
}
15+
16+
.test2,
17+
.test3 {
18+
border: 1px solid red;
19+
}
20+
</style>
2521
</style>
2622
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
2723
</head>
2824

2925
<body>
3026
<h2>.mousedown()方法</h2>
31-
<div class="left">
32-
<div class="aaron">
33-
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
34-
</div>
35-
</div>
36-
<div class="right">
37-
<div class="aaron">
38-
<p>$('.right').mousedown(1111, set)</p>
39-
</div>
40-
</div>
41-
<button>绑定事件this</button>
42-
<button>指定触发事件</button>
43-
<button>不同函数传递数据</button>
44-
45-
4627

28+
<h4>测试一</h4>
29+
<button>弹出回调中的鼠标键</button>
4730
<script type="text/javascript">
48-
//this指向button元素
49-
$("button:eq(0)").mousedown(function(e) {
50-
alert('e.which: ' + e.which)
51-
})
31+
//this指向button元素
32+
$("button:eq(0)").mousedown(function(e) {
33+
alert('e.which: ' + e.which)
34+
})
5235
</script>
5336

5437

38+
<h4>测试二</h4>
39+
<div class="test2">
40+
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
41+
</div>
42+
<button>指定触发事件</button>
5543
<script type="text/javascript">
56-
57-
$('p').mousedown(function(e) {
44+
$('p').mousedown(function(e) {
5845
alert(e.target.textContent)
5946
})
60-
6147
//this指向button元素
62-
$("button:eq(1)").mousedown(function() {
63-
$('p').mousedown() //指定触发绑定的事件
64-
})
65-
48+
$("button:eq(1)").mousedown(function() {
49+
$('p').mousedown() //指定触发绑定的事件
50+
})
6651
</script>
6752

6853

54+
<h4>测试三</h4>
55+
<div class="test3">
56+
<p>$('.right').mousedown(1111, set)</p>
57+
</div>
58+
<button>不同函数传递数据</button>
6959
<script type="text/javascript">
60+
//不同函数传递数据
61+
function data(e) {
62+
alert(e.data) //1111
63+
}
7064

71-
//不同函数传递数据
72-
function data(e) {
73-
alert(e.data) //1111
74-
}
65+
function a() {
66+
$("button:eq(2)").mousedown(1111, data)
67+
}
68+
a();
69+
</script>
7570

76-
function a() {
77-
$("button:eq(2)").mousedown(1111, data)
78-
}
79-
a();
8071

81-
</script>
8272
</body>
8373

8474
</html>

‎慕课网教程案例/jQuery入门教程/jQuery鼠标事件/mousemove事件html renamed to ‎慕课网教程案例/jQuery入门教程/jQuery鼠标事件/mousemove事件.html

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -27,55 +27,52 @@
2727

2828
<body>
2929
<h2>.mousemove()方法</h2>
30+
<h4>测试一</h4>
31+
<button>点击：指定触发mousemove事件</button>
32+
<script type="text/javascript">
33+
$('h2').mousemove(function(e) {
34+
alert('触发h2元素绑定的mousemove')
35+
})
36+
37+
$("button:eq(0)").click(function(e) {
38+
$('h2').mousemove() //指定触发绑定的事件
39+
})
40+
</script>
41+
42+
43+
<h4>测试二</h4>
3044
<div class="left">
3145
<div class="aaron1">
3246
<p>鼠标在绿色区域移动触发mousemove</p>
3347
<p>移动的X位置：</p>
3448
</div>
3549
</div>
50+
<script type="text/javascript">
51+
//绑定一个mousemove事件
52+
//触发后修改内容
53+
$(".aaron1").mousemove(function(e) {
54+
$(this).find('p:last').html('移动的X位置：' + e.pageX)
55+
})
56+
</script>
57+
58+
59+
<h4>测试三</h4>
3660
<div class="right">
3761
<div class="aaron3">
3862
<p>鼠标移动：不同函数传递数据</p>
3963
<p>数据：</p>
4064
</div>
4165
</div>
42-
43-
<button>点击：指定触发mousemove事件</button>
44-
45-
<script type="text/javascript">
46-
//绑定一个mousemove事件
47-
//触发后修改内容
48-
$(".aaron1").mousemove(function(e) {
49-
$(this).find('p:last').html('移动的X位置：' +e.pageX)
50-
})
51-
52-
</script>
53-
54-
55-
<script type="text/javascript">
56-
57-
$('h2').mousemove(function(e) {
58-
alert('触发h2元素绑定的mousemove')
59-
})
60-
61-
$("button:eq(0)").click(function(e) {
62-
$('h2').mousemove() //指定触发绑定的事件
63-
})
64-
65-
</script>
66-
67-
6866
<script type="text/javascript">
69-
//不同函数传递数据
70-
function data(e) {
71-
$(this).find('p:last').html('数据:' + e.data)
72-
}
73-
74-
function a() {
75-
$(".right").mousemove(1111, data)
76-
}
77-
a();
67+
//不同函数传递数据
68+
function data(e) {
69+
$(this).find('p:last').html('数据:' + e.data)
70+
}
7871

72+
function a() {
73+
$(".right").mousemove(1111, data)
74+
}
75+
a();
7976
</script>
8077
</body>
8178

‎慕课网教程案例/jQuery入门教程/淡入淡出效果/fadeTo.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6+
<title></title>
7+
<style>
8+
p {
9+
color: red;
10+
}
11+
</style>
12+
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
13+
</head>
14+
15+
<body>
16+
<h2>fadeTo</h2>
17+
<p>测试文字透明度效果</p>
18+
<p>慕课网,专注分享</p>
19+
透明度的设置效果：
20+
<select id="animation">
21+
<option value="1">fadeTo( "slow" ,0.5 )</option>
22+
<option value="2">fadeTo( 1000 ,0.2 )</option>
23+
<option value="3">fadeTo( 1000 ,0.9 ,complete)</option>
24+
</select>
25+
<input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
26+
<script type="text/javascript">
27+
//【切换显示/隐藏】按钮
28+
$("#btnFadeSwitch").click(function() {
29+
var v = $("#animation").val();
30+
if (v == "1") {
31+
$("p").fadeTo("slow", 0.5);
32+
} else if (v == "2") {
33+
$("p").fadeTo(1000, 0.2);
34+
} else if (v == "3") {
35+
$("p").fadeTo(1000, 0.9, function() {
36+
alert('完成')
37+
});
38+
}
39+
});
40+
</script>
41+
</body>
42+
43+
</html>

0 commit comments

Comments
 (0)