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");} );

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...