jQuery事件与动画

常用事件分类：

jQuery事件是对JavaScript事件的封装，常用事件分类
    基础事件：
        鼠标事件
        键盘事件
        窗口（window）事件
        表单事件
    复合事件：
        鼠标光标悬停
        鼠标连续点击

鼠标事件

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单机鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移入时
mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleava	触发或将函数绑定到指定元素的mouseleava事件	鼠标指针离开时

鼠标事件方法的区别

方法
mouseover()	鼠标进入被选元素时触发	鼠标在其被选元素的子元素上来回进入时触发mouseover，不触发mouenter()
mouenter()	鼠标进入被选元素时触发	鼠标在其被选元素的子元素上来回进入时不触发mousenter
mouseout()	鼠标离开被选元素时触发	鼠标在其被选元素的子元素上来回离开时触发mouseout，不触发mouseleave()
mouseleave()	鼠标离开被选元素时触发	鼠标在其被选元素的子元素上来回离开时不触发mouseleave()

键盘事件

属性： .keycode    键值码

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown事件	键盘按下时
keyup()	触发或将函数绑定到指定元素的keyup事件	键盘抬起时
keypress()	触发或将函数绑定到指定元素的keypress事件	产生可打印字符

窗口事件

调整窗口大小时 $(window).resize();
浏览器宽度   window.innerWidth
浏览器高度   window.innerHeight

绑定事件和移除事件

绑定事件语法：
    .bind(type,[data],function)
描述：
    type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
​
    data:作为event.data属性值传递给事件对象的额外数据对象
​
    fn:绑定到每个匹配元素的事件上面的处理函数
    
    
    
jQuery 3.0中已弃用此方法，请用 on()代替。
    events,[selector],[data],fnV1.7
​
​
参数描述：
    events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
​
    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
​
    data:当一个事件被触发时要传递event.data给事件处理函数。
​
    fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
​
​
例子：
    绑定单个：
        $(".on .menu-btn").bind("mouseover",function (){
                $(this).siblings().show();
            })
            
    绑定多个：
        $(".on .menu-btn").bind({
                "mouseover":function (){
                    $(this).siblings().show()
                },
                "mouseout":function (){
                    $(this).siblings().hide()
                }
            })
            
            
​

移除绑定

语法： .unbind(type,fn)
    当unbind()如果没有参数，则移除所有的绑定事件
参数说明：
    type:删除元素的一个或多个事件,由空格分隔多个事件值。
    fn:要从每个匹配元素的事件中反绑定的事件处理函数

复合事件

hover() 方法      toggle方法

hover方法

hover()方法相当于mouseover和mouseout事件的组合
语法:
    .hover(fnover,fnout)
实例：
    $(function (){
                $(".menu-btn").hover(function (){
                    $(".topDown").show();
                },function (){
                    $(".topDown").hide();
                })
            })

toggle()方法

语法：
    .toggle(fn1,fn2,fn...)
    用于模拟鼠标连续点击事件
注意：1.9版本以后，该方法已经废弃
概述:
    用于绑定两个或多个事件处理器函数，以响应被选元素的click事件
    如果元素是可见的，切换为隐藏的，如果元素是隐藏的，切换为可见的。
    无参的toggle方法：相当于hide()和show()
​
切换样式：
    .toggleClass("className")
    如果元素有该样式，切换时移除样式，如果元素没有该样式，切换时添加该样式

toggle()小结

toggle()和toggleClass()总结：
    toggle(fn1,fn2,fn...):实现单击事件的切换，不需要绑定额外的click事件
    toggle()：实现事件触发对象在显示和隐藏之间状态切换
    toggleclass("className"):实现事件触发对象在加载某个样式和移除某个样式之间的切换

jQuery动画

jQuery提供了一些默认的动画
    控制元素的显示和隐藏  show() hide()
        语法：$("selector").show([speed],[callback]);
        语法：$("selector").hide([speed],[callback]);
        参数描述：
            参数一：速度，可选 例如：1000毫秒等等于1秒 fast slow normal
            参数二：回调函数，可选，show或hide函数执行完之后，要执行的代码
            $(function (){
            $(".nav-ul li").on({
                "mouseover":function (){
                    $(this).css("background","yellow");
                },
                "mouseout":function (){
                    $(this).css("background","#FF2832");
                }
            })
​
            $(".menu-btn").hover(
                    function (){
                        $(this).next().show(1000,function (){
                            console.log("show方法执行完后打印");
                        })
                    },function (){
                        $(this).next().hide("slow");
                    }
            )
​
        })
                    
            
    控制元素的透明度
        语法：
            $("selector")fadeIn([speed],[callback])
            $("selector")fadeout([speed],[callback])
                可以通过改变元素的透明度实现淡入淡出的效果
                
            参数一：速度，可选 例如：1000毫秒等等于1秒 fast slow normal
            参数二：回调函数，可选hide函数执行完之后，要执行的代码
    例子：
        $(function (){
        $("input[name='fadein_btn']").click(function (){
            $("img:eq(0)").fadeIn(5000,function (){
                alert("淡入成功")
            });
        })
        $("input[name='fadeout_btn']").click(function (){
            $("img:eq(0)").fadeOut(1000,function (){
                alert("淡出成功")
            })
        })
    })
                        
            
    控制元素的高度     可以通过改变元素的高度实现淡入淡出效果
            slieUp()    可以使元素逐步延伸显示
            slideDown() 则使元素逐步缩短直至隐藏
            
    语法:
            $("selector")slideUp([speed],[callback])
            $("selector")slideDown([speed],[callback])
        
    
            参数一：速度，可选 例如：1000毫秒等等于1秒 fast slow normal
            参数二：回调函数，可选hide函数执行完之后，要执行的代码
    
    
    
    
    自定义动画       animate()