脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery鼠标事件汇总

jQuery鼠标事件汇总

 更新时间：2015年08月30日 10:55:08   投稿：hebedich  
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,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");}
);

您可能感兴趣的文章:

相关文章

  • jQuery下的几个你可能没用过的功能

    jQuery下的几个你可能没用过的功能

    用jQuery好久了，都做了两个项目了。今儿晚上喝咖啡喝多了，这都两点多了睡不着，给大家分享下我在项目中用到的一些用jQuery实现的一些比较好的功能。希望对一些新手有点用。。。高手们可以拍砖哈。。。。我头很硬不怕疼。。。呵呵。
    2010-08-08
  • jquery对Json的各种遍历方法总结(必看篇)

    jquery对Json的各种遍历方法总结(必看篇)

    下面就为大家带来一篇jquery对Json的各种遍历方法总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 如何使用jQuery Draggable和Droppable实现拖拽功能

    如何使用jQuery Draggable和Droppable实现拖拽功能

    本篇文章是对使用jQuery Draggable和Droppable实现拖拽功能的方法进行了详细的分析介绍，需要的朋友参考下
    2013-07-07
  • 利用jQuery实现轮播图效果

    利用jQuery实现轮播图效果

    这篇文章主要为大家详细介绍了利用jQuery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jquery实现多屏多图焦点图切换特效的方法

    jquery实现多屏多图焦点图切换特效的方法

    这篇文章主要介绍了jquery实现多屏多图焦点图切换特效的方法,涉及jQuery插件jquery.kinMaxShow实现焦点图的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • EasyUI中datagrid在ie下reload失败解决方案

    EasyUI中datagrid在ie下reload失败解决方案

    这篇文章主要介绍了EasyUI中datagrid在ie下reload失败解决方案，结合网上搜集来的几种方案，最终解决了这个问题，分享给大家，希望对大家能够有所帮助。
    2015-03-03
  • jQuery实现的省市联动菜单功能示例【测试可用】

    jQuery实现的省市联动菜单功能示例【测试可用】

    这篇文章主要介绍了jQuery实现的省市联动菜单功能,结合完整实例形式分析了jQuery实现级联菜单的具体流程与操作方法,涉及jQuery表单及数组元素的遍历及事件响应处理技巧.非常简单实用,需要的朋友可以参考下
    2017-01-01
  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考下
    2014-06-06
  • 让人印象深刻的10个jQuery手风琴效果应用

    让人印象深刻的10个jQuery手风琴效果应用

    jQuery 是最流行的 JavaScript 开发框架，它简化了 HTML 文档遍历，事件处理，动画以及 Ajax 交互，帮助 Web 开发人员更快速的实现各种精美的界面效果
    2012-05-05
  • jQuery Ajax之$.get()方法和$.post()方法

    jQuery Ajax之$.get()方法和$.post()方法

    load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或者是后面要讲解到的$.ajax方法）。
    2009-10-10

最新评论