网页中的事件

和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现

jQuery中的事件

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

基础事件;

鼠标事件

键盘事件

window事件

表单事件

复合事件;

      • 鼠标光标悬停
      • 鼠标连续点击

 

鼠标事件:

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

              JQuery事件和动画-LMLPHP

示例:

              JQuery事件和动画-LMLPHP

 

 

 

 

 

鼠标事件方法的区别

              JQuery事件和动画-LMLPHP

              //区别是在于有没有子元素

键盘事件

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

       JQuery事件和动画-LMLPHP

示例:

            JQuery事件和动画-LMLPHP

 

浏览器事件

              语法:$(selector).resize( );       //resize 重新设置大小

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

 

绑定事件与移除事件

绑定事件

移除事件

 

 

绑定事件

              //对同一个时间操作都写在一起,容易维护 符合规范

              JQuery事件和动画-LMLPHP

 

绑定单个事件

同时绑定多个事件

 

绑定单个事件:

示例;

                     使用绑定实现鼠标移至“我的当当”显示二级菜单

                     $(document).ready(function(){

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

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

                            });

});

                     JQuery事件和动画-LMLPHP

 

 

       绑定多个事件:

                            示例;

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

                            JQuery事件和动画-LMLPHP

 

       移除事件:

                     移除事件使用unbind()方法:

                            事件类型,主要包括:blur、focus、click、

mouseout等基础事件,此外,还可以是自定义事件

 

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

提示: 当unbind()不带参数时,表示移除所绑定的全部事件

      

示例:

$("#del").click(function(){

        $("#nav li:first").unbind("click", content1)

});

JQuery事件和动画-LMLPHP

复合事件

                            hover( )方法

toggle( )方法

                            hover()方法:

                                   hover()方法相当于mouseover与mouseout事件的组合

              语法:hover(enter,leave); //进入和离开

示例:

                     JQuery事件和动画-LMLPHP 

                     toggle()方法:

                                   toggle()方法用于模拟鼠标连续click事件

                                   语法:

                                          toggle(fn1,fn2,...,fnN);

                                   示例

                                          $("input").toggle(

                               function(){$("body").css("background","#ff0000");},

                                     function(){$("body").css("background","#00ff00");},

                                    function(){$("body").css("background","#0000ff");}

                            )

                            toggle()方法不带参数,与show( )和hide( )方法作用一样

                            toggleClass( )可以对样式进行切换

                            语法:toggle( );

                            示例:toggleClass(className);

                            语法:$("input").click(function(){$("p").toggle();})

                            示例:$("input").click(function(){$("p").toggleClass("red");})

 

 

小结

toggle( )和toggleClass( )总结

toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件

toggle( )实现事件触发对象在显示和隐藏状态之间切换

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

 

 

jQuery动画效果

  jQuery提供了很多动画效果

控制元素显示与隐藏

改变元素的透明度

改变元素高度

自定义动画

 

控制元素的显示及隐藏

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

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

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

                                                       

                                                 //speed,可选。表示速度,默认为“0”,可能值:

毫秒(如1000)、slow、normal、fast

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

改变元素的透明度

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

                                   语法:

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

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

                                          //speed  可选。表示速度,默认为“0”,可能值:毫秒(如1000)

、slow、normal、fast

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

改变元素的高度

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

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

                            语法:$(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属性

                     //speed 速度

                     //callback 回调函数

 

英雄难过棍子关:

 

              示例:

                     JQuery事件和动画-LMLPHP

                     JQuery事件和动画-LMLPHP

/JQuery事件和动画-LMLPHP     JQuery事件和动画-LMLPHP

 

10-07 16:44