JQuery事件与JavaScript事件相似，只是把其中的on去掉
1.click，dblclick事件
案例1：点击缩略图换背景
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script language="javascript">
$(document).ready(function () {
$(".tt").click(function () {
var aa = $(this).css("background-image");
$("body").css("background-image",aa);
});
})
</script>
<style type="text/css">
.tt {
width:80px;
height:80px;
float:left;
margin:10px;
background-size:80px 80px;
border:1px solid gray;
}
#t1 {
background-image:url("images/01.jpg")
}
#t2 {
background-image:url("images/02.jpg")
}
#t3{
background-image:url("images/03.jpg")
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="tt" id="t1"></div>
<div class="tt" id="t2"></div>
<div class="tt" id="t3"></div>
</div>
</form>
</body>
</html>
案例2:单击轮换背景（简便方法：使用toggle(function(){},function(){}....function(){})来切换样式）
将上述<script></script>中的代码更换成下列代码（鼠标点击一次执行一次toogle）
$(document).ready(function () {
$(this).toggle(function () {
$(document).find("body").css("background-image", "url(images/01.jpg)");
}, function () {
$(document).find("body").css("background-image", "url(images/02.jpg)");
}, function () {
$(document).find("body").css("background-image", "url(images/03.jpg)");
});
});
2.mousedown，mouseup事件
案例：图片被单击后产生一种按下去又弹起来的效果
$(document).ready(function () {
$(".tt").mousedown(function () {
$(this).css("margin", "11px 11px 11px 11px").css("height","78px").css("width","78px").css("border", "1px solid black");
}).mouseup(function () {
$(this).css("margin", "10px 10px 10px 10px").css("height", "80px").css("width", "80px").css("border", "1px solid gray");
});
});
3.mouseover，mouseout事件——可以合成为hover(function(){},function(){})
案例：奇偶行不同色的光棒效果
法一：最原始的方法：直接操作样式表的background-color样式
<script language="javascript">
$(document).ready(function () {
$("#GridView1 tr:gt(0):odd").css("background-color", "pink");
var bg = "white";
$("#GridView1 tr:gt(0)").mouseover(function () {
bg = $(this).css("background-color");
$(this).css("background-color","yellow");
}).mouseout(function () {
$(this).css("background-color", bg);
});
});
</script>
法二：通过增与删样式表选择器来实现。toggleClass
<script language="javascript">
$(document).ready(function () {
$("#GridView1 tr:gt(0):odd").addClass("odd");
$("#GridView1 tr:gt(0)").mouseover(function () {
$(this).toggleClass("mover"); //没有该样式就添加
}).mouseout(function () {
$(this).toggleClass("mover"); //有该样式就删除
});
});
</script>
4.focus，blur事件
案例：文本框（必填）效果
<script language="javascript">
$(document).ready(function () {
$("#TextBox1").focus(function () {
$(this).css("color", "black");
if ($(this).val() == "(必填)") {
$(this).val("");
}
}).blur(function () {
if ($(this).val().length == 0) {
$(this).css("color","#aaaaaa").val("(必填)");
}
});
});
</script>
时间： 2024-10-10 11:02:21