jQuery中的事件与动画

//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("鼠标离开");
});

//2.键盘抬起事件keyup
$("#btn2").keyup(function(){
  $("#div2").css("background","green");
});
//3.按下可打印字符的时候事件keypress
$("#btn2").keypress(function(){
  $("#div2").css("background","pink");
});

//绑定多个事件（实现鼠标移入和移出事件）
$("#div2").bind({
  mouseenter:function(){
    //鼠标移入代码
    $(this).css("width","300px");
  },mouseleave:function(){
    //鼠标移出代码
    $(this).css("width","200px");
  }
});
//移除绑定的事件(移除点击事件)
$("#div2").unbind("click");

//元素的淡入和淡出
//1.淡出
$("#div3").fadeOut(2000);
//2.淡入
$("#div3").fadeIn(2000);
//改变元素的高度
//1.高度变低
$("#div3").slideUp(3000);
//2.高度变高
$("#div3").slideDown(3000);