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 { 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>