一、jQuery选择器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"Selector.js"
></script>
</head>
<body>
<p>p1</p>
<p class=
"pclass"
>p2</p>
<button>Click me</button>
</body>
</html>
$(document).ready(
function
(){
$(
"button"
).click(
function
(){
$(
".pclass"
).text(
"p元素被修改了"
);
})
});
|
二、jQuery事件
1.jQuery事件：
常用事件方法
绑定事件
解除绑定事件
事件的目标
事件的冒泡
自定义事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"EventMethod.js"
></script>
</head>
<body>
<button>Click me</button>
</body>
</html>
$(document).ready(
function
(){
// $("button").click(function(){
// $("button").dblclick(function(){
// $("button").mouseenter(function(){
$(
"button"
).mouseleave(
function
(){
$(
this
).hide();
});
});
|
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"bindEvent.js"
></script>
</head>
<body>
<button id=
"clickMeBtn"
>Click me</button>
</body>
</html>
$(document).ready(
function
(){
// $("#clickMeBtn").click(function(){
// alert("hello");
// });
// $("#clickMeBtn").bind("click",clickHandler1);
// $("#clickMeBtn").bind("click",clickHandler2);
// $("#clickMeBtn").unbind("click",clickHandler1);
$(
"#clickMeBtn"
).on(
"click"
,clickHandler1);
$(
"#clickMeBtn"
).on(
"click"
,clickHandler2);
$(
"#clickMeBtn"
).off(
"click"
,clickHandler1);
});
function
clickHandler1(e){
console.log(
"clickHandler1"
);
}
function
clickHandler2(e){
console.log(
"clickHandler2"
);
}
|
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"EventTarget.js"
></script>
</head>
<body>
<div style=
"width: 300px;height: 300px;background-color: #009B86;"
>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</div>
</body>
</html>
$(document).ready(
function
(){
$(
"body"
).bind(
"click"
,bodyHandler);
$(
"div"
).bind(
"click"
,divHandler1);
$(
"div"
).bind(
"click"
,divHandler2);
});
function
bodyHandler(event){
console.log(event);
}
function
divHandler1(event){
console.log(event);
// event.stopPropagation();
event.stopImmediatePropagation();
}
function
divHandler2(event){
console.log(event);
}
|
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script src=
"jquery-1.10.1.min.js"
></script>
<script src=
"CustomEvent.js"
></script>
</head>
<body>
<button id=
"ClickMeBtn"
>Click Me</button>
</body>
</html>
var
ClickMeBtn;
$(document).ready(
function
(){
ClickMeBtn = $(
"#ClickMeBtn"
);
ClickMeBtn.click(
function
(){
var
e = jQuery.Event(
"MyEvent"
);
ClickMeBtn.trigger(e);
});
ClickMeBtn.bind(
"MyEvent"
,
function
(event){
console.log(event);
});
});
|
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1795214
