jQuery中的事件与动画

Posted 2020-09-01 一场夜雨

 一    基础事件

   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();
});