一、jQuery中的事件:
1.基础事件
(1)鼠标事件
(2)键盘事件
(3)window事件
2.复合事件
(1)鼠标光标悬停
(2)鼠标连续点击
二、鼠标事件:
//1.点击事件click
$("#btn1").click(function(){ $("#div1_1").css(“background”,“green”); });
三、键盘事件:
//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");
五、复合事件:
//1.悬浮事件hover
$("#div3").hover(function(){
//放上去
$(this).css(“background”,“red”);
},function(){
//移开
$(this).css(“background”,“brown”);
});
//2.鼠标连续点击事件
$("#div3").toggle(function(){
alert(‘1’);
},function(){
alert(‘2’);
},function(){
alert(‘3’);
});
六、动画:
//1.隐藏hide
$("#div3").hide(1000);
//2.显示show
$("#div3").show(1000);
//元素的淡入和淡出 //1.淡出 $("#div3").fadeOut(2000); //2.淡入 $("#div3").fadeIn(2000); //改变元素的高度 //1.高度变低 $("#div3").slideUp(3000); //2.高度变高 $("#div3").slideDown(3000);