<!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">
<!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
<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(){
$("#btn1").click(function(){
// on()点击图片弹出信息
$("img:first").on("click",function(){
alert("点击图片！");
});
});
$("#btn2").click(function(){
//$("img:first").off();
$("img:first").off("click"); // 参数指定要取消的事件
});
$("#btn3").click(function(){
/* 直接对对象绑定事件（推荐）
$(document).mousemove(function(e){
$("span:eq(1)").text(e.pageX + ", " + e.pageY);
});
*/
// bind()绑定document的鼠标移动事件并显示鼠标相对位置
$(document).bind("mousemove",function(e){
$("span:last").text(e.pageX + ", " + e.pageY);
});
});
$("#btn4").click(function(){
$(document).unbind("mousemove");
});
$("#btn5").click(function(){
$("img:first").one("click",function(){
alert("one more time!");
});
});
$("#btn6").click(function(){
// hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示
$("span:first").hover(
function(){ // 鼠标悬浮span上
$("img:first").hide();
$(this).addClass("hoverCls");
},
function(){ // 鼠标移开span
$("img:first").show();
$(this).removeClass("hoverCls");
}
);
});
$("#btn7").click(function(){
// 鼠标移动，获取坐标，作为img图片的位置！
$(document).mousemove(function(e){
$("img:first").offset({"left":e.pageX,"top":e.pageY});
})
});
$("#btn8").click(function(){
// 给span添加事件
$("span:eq(0)").click(function(){
alert("点击Span");
return false; // 防止事件冒泡！
});
});
// 给div添加事件
$("div:eq(0)").click(function(){
alert("点击Div");
})
});
</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>
转载请注明原文地址: https://ju.6miu.com/read-1298900.html
