微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery鼠标事件汇总

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

1、click事件

:点击鼠标左键时触发

  $('p').click(function(){});

示例:

rush:js;"> $('p').click(function(){ alert('click function is running !'); });

2、dbclick事件

:迅速连续的两次点击时触发

  $('p').dbclick(function(){});

示例:

rush:js;"> $("button").dblclick(function(){ $("p").slidetoggle(); });

3、mousedown事件

:按下鼠标时触发

  $('p').mousedown(function(){});

示例

rush:js;"> $("button").mousedown(function(){ $("p").slidetoggle(); });

4、mouseup事件

:松开鼠标时触发

  $('p').mouseup(function(){});

示例:

rush:js;"> $("button").mouseup(function(){ $("p").slidetoggle(); });

5、mouSEOver事件

:鼠标从一个元素移入另一个元素时触发

  

mouSEOut事件

:鼠标移出元素时触发

  $('p').mouSEOver(function(){});

  $('p').mouSEOut(function(){});

示例:

rush:js;"> $("p").mouSEOver(function(){ $("p").css("background-color","yellow"); }); $("p").mouSEOut(function(){ $("p").css("background-color","#E9E9E4"); });

6、mouseenter事件

:鼠标移入元素时触发

mouseleave事件

:鼠标移出元素时触发

  $('p').mouseenter(function(){});

  $('p').mouseleave(function(){});

示例

rush:js;"> $("p").mouseenter(function(){ $("p").css("background-color","yellow"); }); $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });

7、hover事件

  $('p').hover(     function(){},     function(){}   );

示例

rush:js;"> $(".table_list tr").hover( function () { $(this).addClass("hover"); },function () { $(this).removeClass("hover"); }

);

8、toggle事件

:鼠标点击切换事件

  $('p').toggle(     function(){},     function(){}   );

示例

rush:js;"> $("p").toggle( function(){ $("body").css("background-color","green");},function(){ $("body").css("background-color","red");},"yellow");} );

原文地址:https://www.jb51.cc/jquery/52592.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐