jQuery事件和动画

常用事件分类：

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

鼠标事件

鼠标事件方法的区别

 

键盘事件

属性：.keyCode 键值码

 

窗口事件

 

绑定事件和移除事件

绑定事件语法:

语法：.bind(type,[data],fn)
参数描述：
    type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
    data:作为event.data属性值传递给事件对象的额外数据对象
    fn:绑定到每个匹配元素的事件上面的处理函数

注意:
    jQuery 3.0中已弃用此方法，请用 on()代替。
参数描述：
    .on(events,[selector],[data],fn)
    events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
    data:当一个事件被触发时要传递event.data给事件处理函数。
    fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

列子：

 

移除绑定

语法：unbind(type,fn)
参数说明：
    type:删除元素的一个或多个事件,由空格分隔多个事件值。
    fn:要从每个匹配元素的事件中反绑定的事件处理函数
注意：
    jQuery 3.0中已弃用此方法，请用 off()代替。
    如果没有参数，则删除所有绑定的事件。

符合事件

hover()方法  toggle()方法

hover()方法：

hover()方法相当于mouseover和mouseout事件的组合
语法：
    .hover(fnover,fnout);

示例：

toggle()方法 ：

语法：
    .toggle(fn1,fn2,fn...)//已废弃
    用于模拟鼠标的连续点击事件
注意：    1.9版本以后方法删除

概述：
    用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

无参的toggle()方法：相当于hide()和show()

切换样式：
    .toggleClass("类名")
    如果元素有该元素，切换时移除样式；如果元素没有该样式，切换时添加该样式

toggle()小结：

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

jQuery动画

jQuery提供了一些默认的动画

控制元素的显示和隐藏 show() hide()
    语法：$("selector").show([speed],[callback]);
         $("selector").hide([speed],[callback]);
    参数描述：
        参数1：速度，可选，默认是0  例如：1000毫秒等等于1秒  fast slow normal
        参数2：回调函数，可选  show()或hide()函数执行完之后，要执行的函数
    示例：
       $(".menu-btn").hover(
                function () {
                    $(this).next().show(1500,function () {
                        alert("5秒")
                    });
                },function () {
                    $(this).next().hide("slow",function () {
                        console.log("hide方法执行完后打印")
                    });
                }
        )

控制元素的透明度    可以通过改变元素的透明度实现淡入淡出效果
    fadeIn() fadeOut()
语法：
    $("selector").fadeIn([speed],[callback]);
    $("selector").fadeOut([speed],[callback]);
参数描述：
    参数1：速度，可选，默认是0  例如：1000毫秒等等于1秒  fast slow normal
    参数2：回调函数，可选  fadeIn()或fadeOut()函数执行完之后，要执行的函数
示例：
    $("input[name='fadein_btn']").click(function () {
            $("img:eq(0)").fadeIn(2000,function () {
                alert("淡入成功")
            })
        })
    $("input[name='fadeout_btn']").click(function () {
            $("img:eq(0)").fadeOut(2000,function () {
                alert("淡出成功")
            })
        })

控制元素的高度        可以通过改变元素的高度实现淡入淡出效果
slideDown()：可以使元素逐步延伸显示
slideUp()：则使元素逐步缩短直至隐藏
语法：
    $("selector").slideUp([speed],[callback]);
    $("selector").slideDown([speed],[callback]);
参数描述：
    参数1：速度，可选，默认是0  例如：1000毫秒等等于1秒  fast slow normal
    参数2：回调函数，可选  slideUp()或slideDown()函数执行完之后，要执行的函数
示例：
    $("h2").click(function () {
                $(".txt").slideUp(1000);
                $(".txt").slideDown(3000);
            })