jQuery鼠标事件汇总
网络编程 2021-07-04 21:03www.168986.cn编程入门
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,狼蚁网站SEO优化我们就来看下这些事件的语法和用法
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
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");} );
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程