jQuery事件与动画

72 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情

什么是事件?

 

  事件是指用户对文档进行访问的一种交互行为

 

鼠标事件

 

  click  鼠标单击元素时

 

  mousemove()  鼠标移入元素时

 

  mouseout()  鼠标移出元素时

 

  mouseenter()  鼠标进入元素时

 

  mouseleave()  鼠标离开时

 

    注意:鼠标移入和移出的区别

 

  移入:只要在元素内移动就会触发

 

  进入:只要在元素内,不管怎么移动,只会触发一次

 

键盘事件

 

  keydown()  键盘按键按下时

 

  keyup()    键盘按键抬起时

 

  keypress()  键盘可打印字符按下时  除功能键以外

 

  $(document).keydown(function(key){}  直接获取按键对象   key就是按键对象

 

  keyCode()  获取键盘上的ascll码值

 

窗口事件

 

   指窗口发生大小改变时触发

 

  $(window).resize(function(){

 

            alert("调整窗口")

 

        });

 

绑定事件

 

  $("div").bind("事件名",function(){})  单个绑定

 

  $("div").bind({

 

    事件名1,function(){},事件名2,function(){}.......

 

解除绑定

 

  $("div").unbind("事件1")    解邦单个

 

  $("div").unbind()    事件全部失效

 

  $("div").unbind("事件1","事件2")

 

复合事件

 

  $("button").hover(鼠标进入,鼠标离开)

 

  $("button").hover(function(){},function(){});

 

  $("button").toggle(函数1,函数2,......)

 

  $("button").toggle(function(){},function(){},......)

 

  $("p").toggleClass("类样式名");  添加和移除整个样式

 

  $("p").toggleClass("text");

 

动画

 

  显示和隐藏

 

显示

 

  show(过渡时间,function(){})  显示完后,执行后面的函数

 

  show(过渡时间,函数名) 

 

  function  函数名(){}    可执行的外部函数

 

隐藏

 

  hide(过渡时间,function(){})  等待显示完后,执行后面的函数

 

  hide(过渡时间,函数名)    时间可以为毫秒,也可以为 solw慢  normal默认  fast快

 

  function  函数名(){}    可以执行的函数

 

淡入

 

  fadeln(过渡时间,function(){})  显示完后,执行后面的函数

 

  fadeln(过渡时间,函数名) 

 

  function  函数名(){}    可执行的外部函数

 

淡出

 

  fadeOut(过渡时间,function(){})  等待显示完后,执行后面的函数

 

  fadeOut(过渡时间,函数名)    时间可以为毫秒,也可以为 solw慢  normal默认  fast快

 

  function  函数名(){}    可以执行的函数

 

延申和缩短

 

   延申

 

  slideDown(过渡时间,function(){})  显示完后,执行后面的函数

 

  slideDown(过渡时间,函数名) 

 

  function  函数名(){}    可执行的外部函数

 

   缩短

 

  slideUp(过渡时间,function(){})  等待显示完后,执行后面的函数

 

  slideUp(过渡时间,函数名)    时间可以为毫秒,也可以为 solw慢  normal默认  fast快

 

  function  函数名(){}    可以执行的函数

 

动画特效

 

  animate({"属性":"属性值","属性值1":"属性值1"......},动画时间,function(){})

 

  animate({"属性":"属性值","属性值1":"属性值1"......},动画时间,函数名)

 

  unction  函数名(){}  可执行外部函数