码迷,mamicode.com
首页 > Web开发 > 详细

jquery的事件与动画

时间:2020-06-29 13:45:26      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:function   end   this   函数   mouseover   alert   down   hide   event   

jquery中的事件是对javascript事件的封装

         基础事件

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

方法

描述

执行时机

click( )

触发或将函数绑定到指定元素的click事件

单击鼠标时

mouseover( )

触发或将函数绑定到指定元素的mouseover事件

鼠标指针移过时

mouseout( )

触发或将函数绑定到指定元素的mouseout事件

鼠标指针移出时

mouseenter( )

触发或将函数绑定到指定元素的mouseenter事件

鼠标指针进入时

mouseleave( )

触发或将函数绑定到指定元素的mouseleave事件

鼠标指针离开时

                                示例:

                      $("#panel .head").mouseover(function(){

                      $(this).next().show();

                      })

                     $("#panel .head").mouseout(function(){

                     $(this).next().hide();

                     })

                    鼠标事件方法的区别

            

方法

相同点

不同点

mouseover( )

鼠标进入被选元素时会触发

鼠标在其被选元素的子元素上来回进入时:

触发mouseover( )

不触发mouseenter( )

mouseenter( )

mouseout( )

鼠标离开被选元素时会触发

鼠标在其被选元素的子元素上来回离开时:

触发mouseout( )

不触发mouseleave( )

mouseleave( )

               

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

keydown( )

触发或将函数绑定到指定元素的keydown事件

按下键盘时

keyup( )

触发或将函数绑定到指定元素的keyup事件

释放按键时

keypress( )

触发或将函数绑定到指定元素的keypress事件

产生可打印的字符时

                    示例:实现按键时特效

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

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

               }).keydown(function (e) {

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

              }).keypress(function () {

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

             });

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

          if (event.keyCode == "13") {//按回车键

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

          }

           });

                window事件

                表单事件

         绑定时间与移除事件

                绑定事件使用bind()方法

         复合事件

                hover()方法

               toggle()方法

jquery的事件与动画

标签:function   end   this   函数   mouseover   alert   down   hide   event   

原文地址:https://www.cnblogs.com/cy7533649/p/13207291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!