jQuery事件与特效

jQuery事件是对JavaScript事件的封装，常用事件分类：

1、基础事件

2、鼠标事件

3、键盘事件

4、window事件

5、表单事件

6、复合事件

鼠标事件

制作导航页面

以mouseover( ) 与mouseout( )方法为例，实现导航菜单

鼠标事件方法的区别

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件

 // 键盘事件

        $("input").keydown(function () {

            console.log("键盘被按下了");

        })

        $("input").keypress(function () {

            console.log("键盘打印字符");

        })

        $("input").keyup(function () {

            console.log("键盘离开了");

        })

        // 表单触发

        $(document).keydown(function (e) {

            if (e.keyCode == 13) {

                alert("表单被触发了")

            }

        })

以键盘事件为例，实现按键时特效

$("[type=password]").keyup(function () {

       $("#events").append("keyup");

      }).keydown(function (e) {

       $("#events").append("keydown");

      }).keypress(function () {

       $("#events").append("keypress");

     });

$(document).keydown(function (event) {

        if (event.keyCode == "13") {

              alert("确认要提交么？");

       }

});

浏览器事件

调整窗口大小时，完成页面特效

$(selector).resize( );

绑定单个事件

     // 单个事件

        $("div").on("click", function () {

            $(this).css({

                background: "blue", transition: "all 1s"

            })

        })

使用绑定实现鼠标移至显示二级菜单

$(".on").on("mouseover",function(){

              $(".topDown").show();

       });

同时绑定多个事件

 $("div").on({

            click: function () {

                $(this).css({

                    background: "blue", transition: "all 1s"

                })

            },

            mouseover: function () {

                $(this).css({

                    width: "600px", transition: "all 1s"

                })

            },

            mouseout: function () {

                $(this).css({

                    height: "100px", transition: "all 1s"

                })

            },

        })

使用绑定多个事件实现二级菜单的显示和隐藏

$(".top-m .on").on({

       mouseover:function(){

              $(".topDown").show();

       },

       mouseout:function(){

              $(".topDown").hide();

       }

});

利用on给未来元素，做事件委托处理：

$("body").on("mouseover",".abc",function(){

              $(".topDown").show();

       });

移除事件

移除事件使用off()方法

当off()不带参数时，表示移除所绑定的全部事件

hover()方法

hover()方法相当于mouseenter与mouseleave事件的组合

（进入到子元素不触发触发）

hover(enter,leave);

第一个函数表示光标移入时触发

第二个函数表示光标移出时触发

     $("ul li").hover(function () {

            $("p").css({ display: "block" });

        },

            function () {

                $("p").css({ display: "none" });

            },

        )

$(".top-m .on").hover(function(){

       $(".topDown").show();

          },

         function(){

        $(".topDown").hide();

         }

);

练习：

使用hover( )实现鼠标移至菜单上时，显示二级菜单，移出当前菜单时二级菜单隐藏

使用toggleClass( )实现鼠标移至菜单上时背景颜色变为橙色，鼠标移出当前菜单时背景颜色恢复为原来颜色

jQuery动画效果

控制元素的显示及隐藏

    function () {

                $(this).find("ol").show(function () {

                    alert(1)

                })

            }, function () {

                $(this).find("ol").hide()

            },

show() 控制元素的显示，hide( )控制元素的隐藏

$(selector).show([speed],[callback])

$(selector).hide([speed],[callback])

speed 可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast

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

改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

        function () {

                $(this).find("ol").fadeIn(5000, function () {

                    alert(1)

                })

            }, function () {

                $(this).find("ol").fadeOut(300)

            }

        )

$(selector).fadeIn([speed],[callback])

$(selector).fadeOut([speed],[callback])

改变元素的高度(像卷帘门一样的效果)

slideDown() 可以使元素逐步延伸显示

slideUp()则使元素逐步缩短直至隐藏

     function () {

                $(this).find("ol").slideDown(5000, function () {

                    // alert(1)

                })

            }, function () {

                $(this).find("ol").slideUp(300)

            }

        )

$(selector).slideUp ([speed],[callback])

$(selector).slideDown ([speed],[callback])

$(document).ready(function() {

       $("h2").click(function(){

          $(".txt").slideUp("slow");

          $(".txt").slideDown("slow");

       });

 });

自定义动画

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

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