手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery鼠标事件汇总
jQuery鼠标事件汇总
摘要:鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。1、click事件:点击鼠标左键时触发$('p').click(function...

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

1、click事件:点击鼠标左键时触发

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

示例:

$('p').click(function(){ alert('click function is running !'); });

2、dbclick事件:迅速连续的两次点击时触发

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

示例:

$("button").dblclick(function(){ $("p").slideToggle(); });

3、mousedown事件:按下鼠标时触发

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

示例

$("button").mousedown(function(){ $("p").slideToggle(); });

4、mouseup事件:松开鼠标时触发

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

示例:

$("button").mouseup(function(){ $("p").slideToggle(); });

5、mouseover事件:鼠标从一个元素移入另一个元素时触发

mouseout事件:鼠标移出元素时触发

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

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

示例:

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

示例

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

7、hover事件

$('p').hover(

function(){},

function(){}

);

示例

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

8、toggle事件:鼠标点击切换事件

$('p').toggle(

function(){},

function(){}

);

示例

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

【jQuery鼠标事件汇总】相关文章:

Jquery注册事件实现方法

JQuery控制Radio选中方法分析

JQuery中上下文选择器实现方法

解析javascript中鼠标滚轮事件

jQuery取消ajax请求的方法

jQuery实现强制cookie过期方法汇总

动态加载jQuery的方法

jQuery插件datepicker 日期连续选择

jQuery替换textarea中换行的方法

jQuery切换所有复选框选中状态的方法

精品推荐
分类导航