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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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 serialize()与unserialize()的用法
2013/06/05 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
python黑魔法之编码转换
2016/01/25 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python3人脸识别的两种方法
2019/04/25 Python
python3 enum模块的应用实例详解
2019/08/12 Python
浅谈Python 递归算法指归
2019/08/22 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
班会关于环保演讲稿
2013/12/29 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
mysql幻读详解实例以及解决办法
2022/06/16 MySQL