jQuery - 事件（二）之 鼠标事件
2016-08-08 本文已影响33人
AshengTan
鼠标事件，元素对鼠标的诸如单击、双击、进入、离开等事件做出反应。
本文目录：
- click()；
- dblclick()；
- hover()。
click(handler)
为所选元素添加单击事件。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
dblclick(handler)
为所选元素添加双击事件。
| 参数 | 类型 | 描述 |
|---|---|---|
| handler | Function | 必选。事件触发时执行的函数。 |
下面的例子是点击 <code>单击</code> 按钮时 div 背景色变为橙色， 点击 <code>双击</code> 按钮时 div 背景颜色变红色。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件02_点击</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<div></div>
<button id="btn1">单击</button>
<button id="btn2">双击</button>
<script>
$(function () {
// click()：单击
$("#btn1").click(function () {
$(this).prev().css("backgroundColor","orange");
});
// dblclick()：双击
$("#btn2").dblclick(function () {
$("div:eq(0)").css("backgroundColor","red");
});
});
</script>
</body>
</html>
效果演示：
click()和dblclick().gif
hover(handlerIn, handlerOut)
为所选元素添加鼠标悬停时和鼠标离开时执行的事件函数。
| 参数 | 类型 | 描述 |
|---|---|---|
| handlerIn | Function | 必选。鼠标悬停于所选元素之上时执行的事件函数。 |
| handlerOut | Function | 必选。鼠标离开所选元素时执行的事件函数。 |
下面的例子是这样的：div 的宽高都为 200px，边框为 1px solid lightgray，背景颜色为蓝色；鼠标悬停于 div 之上时，div 背景颜色为橙色，离开时恢复成蓝色。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件04_hover()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid lightgray;
background-color: dodgerblue;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
$("div").hover(function () {
$(this).css("backgroundColor", "orange");
}, function () {
$(this).css("backgroundColor", "dodgerblue");
});
});
</script>
</body>
</html>
效果演示：
hover().gif
