一、jQuery中的事件：
1.基础事件
（1）鼠标事件
（2）键盘事件
（3）window事件
2.复合事件
（1）鼠标光标悬停
（2）鼠标连续点击
二、鼠标事件：
$("#btn1").click(function(){
$("#div1_1").css(“background”,“green”);
});
//2.鼠标指针移过事件mouseover（当指针移入该元素以及包含的子元素时，都会重新触发该mouserover和mouseout事件） $("#div1").mouseover(function(){ console.log("指针移过");//给控制台打印信息 }); //3.鼠标指针移出事件mouseout $("#div1").mouseout(function(){ console.log("指针移出"); }); //4.鼠标指针进入事件mouseenter（当鼠标指针移入该元素的子元素时，不会触发mouseenter和mouseleave事件） $("#div1").mouseenter(function(){ console.log("鼠标进入"); }); //5.鼠标指针离开事件mouseleave $("#div1").mouseleave(function(){ console.log("鼠标离开"); });
三、键盘事件：
//1.键盘按下事件keydown(按下任意键的时候触发)
$("#btn2").keydown(function(){
$("#div2").css(“background”,“blue”);
});
//2.键盘抬起事件keyup $("#btn2").keyup(function(){ $("#div2").css("background","green"); }); //3.按下可打印字符的时候事件keypress $("#btn2").keypress(function(){ $("#div2").css("background","pink"); });
四、//绑定事件bind(单个事件)
$("#btn3").bind(“click”,function(){
$("#div2").css(“background”,“orange”);
});
//绑定多个事件（实现鼠标移入和移出事件） $("#div2").bind({ mouseenter:function(){ //鼠标移入代码 $(this).css("width","300px"); },mouseleave:function(){ //鼠标移出代码 $(this).css("width","200px"); } }); //移除绑定的事件(移除点击事件) $("#div2").unbind("click");
五、复合事件：
$("#div3").hover(function(){
//放上去
$(this).css(“background”,“red”);
},function(){
//移开
$(this).css(“background”,“brown”);
});
$("#div3").toggle(function(){
alert(‘1’);
},function(){
alert(‘2’);
},function(){
alert(‘3’);
});
六、动画：
$("#div3").hide(1000);
$("#div3").show(1000);
//元素的淡入和淡出 //1.淡出 $("#div3").fadeOut(2000); //2.淡入 $("#div3").fadeIn(2000); //改变元素的高度 //1.高度变低 $("#div3").slideUp(3000); //2.高度变高 $("#div3").slideDown(3000);
