jQuery中的事件（八）：on()、off()、bind()、unbind()、one()、hover()、hide()、show()、offset()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{color: #4CA902}
.cPink{color: #ED4A9F}
.cBlue{color: #0092E7}
.cCyan{color: #01A6A2}
.cYellow{color: #DCA112}
.cRed{color: #B7103B}
.cPurple{color: #792F7C}
.cBlack{color: #110F10}
.cOrange{color: #FF4500}
.cGray{color: #A9A9A9}
.hide{display: none;}
div {
width:100%;
text-align: center;
}
span {
border:solid 1px #A9A9A9;
padding:10px;
text-align: center;
}
.hoverCls{
color:#FF4500;
border:solid 1px #FF4500;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
/*
事件绑定与取消绑定：
on()：在选择元素上绑定一个或者多个事件处理函数！
$("p").on("click", function() {
alert($(this).text());
});
off()：在选择元素上移除一个或多个事件处理函数。
off()方法移除用.on()绑定的事件处理程序。
$("p").off("click", "**");
*/
// <input type="button" id="btn1" value="on()点击图片弹出信息">
// on：绑定一个事件。
$("#btn1").click(function() {
$("img").on("click", function() {
alert("图片被点击了！");
});
});
// <input type="button" id="btn2" value="off()取消图片的点击事件">
// off()：有参数就删除特定的事件，没有参数删除这个标签的所有事件。
$("#btn2").click(function() {
$("img").off("click");
});
// <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
//
$("#btn3").click(function() {
// 绑定鼠标在文档中的移动事件，对整个文档进行绑定
$(document).bind("mousemove", function(e) {
// 获取当前鼠标的位置
// 设置显示位置
$("span:eq(1)").html(e.pageX+", "+e.pageY);
});
});
// <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
$("#btn4").click(function() {
// 取消
$(document).unbind("mousemove");
});
// <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
$("#btn5").click(function() {
// 只点击一次
$("img").one("click", function() {
alert("弹出框只会第一次点击弹出！");
});
});
// <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
$("#btn6").click(function() {
$("span:first").hover(
function() {
// mouseover鼠标放在上面的时候
// 1.1 隐藏图片
$("img").hide();
// 1.2 修改span元素的样式：加个假高亮
$(this).addClass("hoverCls");
}, function() {
// 鼠标移开的时候
// 2.1 显示图片
$("img").show();
// 把span的样式修改回来
$(this).removeClass("hoverCls");
});
});
// <input type="button" id="btn7" value="如影随形">
$("#btn7").click(function() {
// 绑定鼠标在整个文档中的移动事件
$(document).bind(
"mousemove", function(e) {
$("img").offset({
"left":e.pageX, "top":e.pageY
});
});
});
/*
给所有div注册一个点击事件，
用于测试产生的事件冒泡！
*/
$("div").click(function() {
alert("触发div点击事件");
});
// <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
$("#btn8").click(function() {
$("img").on("click", function() {
alert("图片被点击了。");
return false;
});
});
});
</script>
</head>
<body>
<div>
<br>
<span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>
<br><br>
<img alt="itcast" src="logo.png">
<br><br>
鼠标的相对位置为：<span style="border:0px;"></span>
</div>
<div style="clear:both;"></div>
<br><br>
<hr>
<input type="button" id="btn1" value="on()点击图片弹出信息">
<input type="button" id="btn2" value="off()取消图片的点击事件">
<input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
<input type="button" id="btn4" value="unbind()取消bind绑定的事件">
<input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
<input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
<input type="button" id="btn7" value="如影随形">
<input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
</body>
</html>手机扫一扫
移动阅读更方便
你可能感兴趣的文章