jQuery鼠标事件汇总


Posted in Javascript onAugust 30, 2015

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

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");}
);
Javascript 相关文章推荐
对于this和$(this)的个人理解
Sep 08 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
vue实现搜索过滤效果
May 28 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 #Javascript
jquery专业的导航菜单特效代码分享
Aug 29 #Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 #Javascript
js精美的幻灯片画集特效代码分享
Aug 29 #Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 #Javascript
jquery实现清新实用的网页菜单效果
Aug 28 #Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
You might like
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python中加背景音乐如何操作
2020/07/19 Python
高级3D打印市场:Gambody
2019/12/26 全球购物
竞选部门副经理的自荐书范文
2014/02/11 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
员工加薪申请报告
2015/05/15 职场文书