jQuery中的事件与动画

一、jQuery中的事件

01、基础事件

　　载入事件　　ready()方法　　$(document).ready(function(){...})　　简写$(function(){...})

　　鼠标事件　　

　　　　click()　　　　鼠标单击时

　　　　mouseover()　　鼠标指针移过时，进入本身和其子元素都会触发一次

　　　　mouseout()　　鼠标指针移出时，移出本身和其子元素都会触发一次

　　　　mouseenter()　　鼠标指针进入时，只有进入本身会触发一次，在进入子元素不会触发

　　　　mouseleave()　　鼠标指针离开时，只有离开本身会触发一次，只离开其子元素不会触发

　　键盘事件

　　　　keydown()　　按下按键时

　　　　keyup()　　释放按键时

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

　　浏览器事件

　　　　resize()　　调整窗口大小时

02、绑定事件和移除事件

　　事件绑定（解除绑定）：on(off)、bind(unbind)、live(die)

 /*针对于我们 新增的li 没有事件  解决方案！  绑定事件
          $("ul").on("mouseover","li",function(){
              $(this).css({"background":"red"});
          });
          $("ul").on("mouseout","li",function(){
              $(this).css({"background":"pink"});
          });*/

          $("ul").on({  //同时绑定多个事件
              mouseover:function(){
              $(this).css({"background":"red"});
              },
              mouseout:function(){
              $(this).css({"background":"pink"});
          }},"li");
          /*解除绑定事件*/
          $("#btnClose").click(function(){
              $("ul").off("mouseover");
          })
 /*事件bing  绑定     解除绑定  unbind*/
    $("li").bind({
        mouseover:function(){
            $(this).css({"background":"red"});
        },
        mouseout:function(){
            $(this).css({"background":"pink"});
        }
    })
/*事件live  绑定    解除绑定  die*/
    $("li").live({
        mouseover:function(){
            $(this).css({"background":"red"});
        },
        mouseout:function(){
            $(this).css({"background":"pink"});
        }
    })

　　绑定事件

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

　　　　　　type　　事件类型　　主要包括click、mouseover、mouseout等基础事件，还可以是自定义事件

　　　　　　data　　可选参数　　作为event.data属性值传递给事件对象的额外数据对象，

　　　　　　fn　　　处理函数　　用来绑定处理函数

　　移除事件

　　　　语法：　　unbind([type,[fn]])

　　　　　　type　　事件类型

　　　　　　fn　　　处理函数

　　　　　　两个参数不是必须的，当unbind不带参数时，表示移出所有绑定的全部事件

03、复合事件

　　hover()方法

　　　　语法：　　hover(enter,leave)

　　toggle()方法

　　　　语法：　　toggle(fn1,fn2,···,fnN);

　　　　　　带参数的方法用于模拟鼠标连续click事件，所有函数走完，下次点击重新开始

　　　　　　不带参数的方法，与show()和hide()一样，切换元素的可见性

　　toggleClass()方法

　　　　语法：　　toggleClass(className)

　　　　　　实现事件触发某元素在“加载className类样式”和“移除className样式”之间的切换

二、jQuery中的动画

01、控制元素的显示和隐藏

　　控制元素的显示　

　　　　语法：　　$(selector).show([speed],[callback])

　　控制元素的隐藏

　　　　语法：　　$(selector).hide([speed],[callback])

　　　　　　speed　　可选　　元素从隐藏（显示）到显示（隐藏）的速度，毫秒为单位，默认为0，也可以直接用slow、normal、fast

　　　　　　callback　可选　　函数执行完之后，要执行的函数

02、改变元素透明度

　　控制元素淡入

　　　　语法：　　$(selector).fadeIn([speed],[callback])

　　　　　　speed　　可选　　元素从隐藏到完全可见的速度，毫秒为单位，默认为0，也可以直接用slow、normal、fast

　　　　　　callback　可选　　函数执行完之后，要执行的函数。除非设置了speed参数，否则不能设置该参数

　　控制元素淡出

　　　　语法：　　$(selector).fadeOut([speed],[callback])

03、改变元素高度

　　向下延伸显示：　　$(selector).slideDown([speed],[callback])

　　向上延伸显示：　　$(selector).slideUp([speed],[callback])

　　　　　speed　　可选　　元素从隐藏到完全可见的速度，毫秒为单位，默认为0，也可以直接用slow、normal、fast

　　　　　callback　可选　　函数执行完之后，要执行的函数

04、自定义动画

　　语法：　　$(selector).animate({params},speed,callback)

　　　　params　　必须，定义形成动画的CSS属性

　　　　speed　　可选，规定效果时长，毫秒，fast、slow。

　　　　callback　　可选，滑动完成后执行的函数名称