jQuery事件按执行时间，主要分为两种，第一种是在网页加载完执行，第二种绑定在元素中，由访问者某些行为触发。
$(document).ready(function(){ //事件 }); $("#xx").bind( "click",function(){ //事件 });
$("#xx").unbind("click"); //接触该元素的所有click事件
当然，第二种事件一般情况下是放在第一种内部的
事件的简写
$("#xx").click(function(){
//事件
});
jQuery还提供了一些合成事件，简化代码
hover(enter,leave);//光标移动到某位置，触发enter事件，离开触发leave事件 toggle(fn1,fn2,fn3...);//鼠标连续单击事件 $("#xx").hover(function(){ $(this).hide(); },function{ $(this).show(); }); //此段代码仅为举例，运行效果并不好
事件冒泡的解决方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>example for html5</title> <script src="jquery.js" type="text/javascript"></script> </head> <body> <div id="diveve"> <p id="peve"> ncqnvqj<a href=# id="aeve">aeve</a> </p> </div> <script type="text/javascript"> $(document).ready(function(){ $("#diveve").click(function(){ alert("div"); }); $("#peve").click(function(event){ alert("p"); event.stopPropagation(); }); $("#aeve").click(function(event){ alert("a"); event.stopPropagation(); }); });
模拟操作：trigger()
$("#xx").trigger("click"); //普通模拟
$("#xx").bind("myclick",function(){});
$("#xx").trigger("myclick"); //自定义事件
$("#xx").bind("myclick",function(event,message1,message2){});
$("#xx").trigger("myclick",["我的自定义","事件"]); //传递数据
集合以上知识点，可实现图片的轮播动画：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>example for html5</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> .showmore{ position:absolute; top:100px; width:300px; left:50%; margin-left:-150px; height:100px; overflow:hidden; display:inline-block; border:1px pink solid } </style> </head> <body> <div><a href=# id="button">翻页</a></div> <div class="showmore" > </div> <script type="text/javascript"> $(document).ready(function(){ for(var i=1;i<5;i++) { $divpic=$("<img class='imgr'/>"); $divpic.attr("src",String(i)+".jpg"); $(".showmore").append($divpic); $divpic.css({"position":"absolute","top":"0px","left":i*100-100+"px","width":"100px","height":"100px"}); } $(function()
{ //把轮播函数放在匿名函数中 $("#button").bind("click",function() //给button绑定事件
{
$(".imgr").animate({left:"-=100px"},function() //animate()方法中回调函数的使用 { for(var i=0;i<4;i++) //遍历找出第一张图片，并将其移动到盒子最后端 { if($($(".imgr")[i]).css("left")=="-100px") //这里涉及到DOM和jQuery对象的相互转化 { $($(".imgr")[i]).css("left","300px"); } } }); }); }); }); </script> </body> </html>