jquery 鼠标事件汇总

鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法

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

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

转载于:https://www.cnblogs.com/xuange306/p/6657115.html

jquery 鼠标事件汇总相关推荐

JQuery 鼠标事件使用汇总
一.js鼠标事件 1.单机 :左键单机.右键单机 2.双击 3.鼠标按下.鼠标松开 4.鼠标移动 5.鼠标进入.鼠标移出 6.鼠标滚轮滚动二.JQuery鼠标事件整理 1.单机 :左键单机.右键单机 ...
深入学习jQuery鼠标事件
前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件类型鼠标事件共10类,包括click.contextmenu.dblclic ...
jQuery鼠标事件与hover事件
(作者:老薛,撰写时间:2019年5月13日) 在我学到jQuery鼠标事件,我知道了jQuery鼠标事件列表中有很多事件,它们分别是:1.click 单击事件.2.dbclick 双击事件.3.mo ...
jQuery鼠标事件（转）
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function ...
常用jquery鼠标事件和渐变动画效果
2019独角兽企业重金招聘Python工程师标准>>> 鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的以下是具体事件的介绍: (1):click事件:click事件于用户 ...
jQuery鼠标事件整理
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法! 1.click事件:点击鼠 ...
Cesium鼠标事件汇总
限制鼠标的视图控制 // 禁用放大缩小和自由旋转视图 viewer.scene.screenSpaceCameraController.enableZoom = false; viewer.scene ...
js中jquery鼠标事件（点击替换、鼠标移入、移出）
1.先添加三张图片 <img src="./vscode/images/1.jpg" width="300"><img src=". ...
JQuery的事件之鼠标事件
最近在慕课网学习JQuery,然后在W3C参考相关资料(在这里感谢慕课网,感谢W3C)!样式和DOM都学完了,最近在学习事件,但是说实话很多东西真的不是很理解,手里倒是有源码,但是作为菜鸟问题就在这里 ...

jquery 鼠标事件汇总

jquery 鼠标事件汇总相关推荐

最新文章

热门文章