首页 > 代码库 > jQuery中的事件与动画

jQuery中的事件与动画

 一    基础事件

   1 jQuery中典型的事件方法

     单击事件  click(fn)

     按下键盘触发事件    kendown(fn) 

     失去焦点事件   blur(fn)

   2 常用的鼠标事件方法

     click(fn)  单击鼠标

     mouseover(fn)  鼠标指针移过时

     mouseout(fn)   鼠标指针移出时

   3 键盘事件

     keydown(fn)   按下键盘时

     keyup(fn)    释放键盘时

     keypress()   产生可打印的字符时

   4 表单事件

     focus()   获得焦点

     blur()     失去焦点

   5 绑定事件与移除事件

      语法 : bind(type,[data],fn)

     绑定一个事件

       

$("button").bind("click",function(){
  $("p").slideToggle();
});

   绑定多个事件

$(selector).bind({event:function, event:function, ...})

 移除事件

      语法 :unbind([type],[fn]);

   

$("button").click(function(){
  $("p").unbind();
});

  复合事件

    hover()方法

      语法:hover(enter,leave);

   当鼠标指针悬停在上面时,改变 <p> 元素的背景颜色:

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
}); 

  toggle()方法

       语法:  toggle(f1,f2);

  二  jQuery中的动画

     1 控制元素显示与隐藏

        显示语法 : $(selector).show([speed],[callback]);

$(".btn2").click(function(){
  $("p").show();
});

 

        隐藏语法 :   $(selector).hide([speed],[callback]);

$(".btn2").click(function(){
  $("p").hide();
});

  2  改变元素的透明度

       淡入语法: $(selector).fadeIn([speed],[callback]);

  

$(".btn2").click(function(){
  $("p").fadeIn();
});

  淡出语法 :$(selector).fadeOut([speed],[callback]);

$(".btn2").click(function(){
  $("p").fadeOut();
});

  

jQuery中的事件与动画