jQuery中的事件与动画

一、jQuery中的事件：
1.基础事件
（1）鼠标事件
（2）键盘事件
（3）window事件
2.复合事件
（1）鼠标光标悬停
（2）鼠标连续点击
二、鼠标事件：
//1.点击事件click
$("#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");

五、复合事件：
//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);