码迷,mamicode.com
首页 > Web开发 > 详细

jQuery中的事件与动画

时间:2017-02-23 13:45:34      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:mouseover   控制   span   speed   透明   eve   动画   selector   button   

 一    基础事件

   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中的事件与动画

标签:mouseover   控制   span   speed   透明   eve   动画   selector   button   

原文地址:http://www.cnblogs.com/sunbin123/p/6432889.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!