jQuery事件与动画

Posted 2022-12-29

什么是事件？

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

鼠标事件

  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  函数名()  可执行外部函数