`
qepipnu
  • 浏览: 76570 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuery的鼠标事件

阅读更多
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
   (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
        $('p').click(function(){
                alert('click function is running !');
              });
    (2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
        $('p').dbclick(function(){
                alert('dbclick function is running !');
              });
    (3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。
        $('p').mousedown(function(){
                alert('mousedown function is running !');
              });
    (4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。
        $('p').mouseup(function(){
                alert('mouseup function is running !');
              }).click(function(){
                 alert('click function is running too !');
                 });
    (5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。
    (6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
   (5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。
    (7):mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。
         $('p').mouseenter(function(){
                alert('mouseenter function is running !');
              });
    (8):mouseleaver事件:mouseleaver事件是在用户的光标离开元素时触发。
           $('p').mouseleaver(function(){
                alert('mouseleaver function is running !');
             });
     (7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
       $('p').hover(function(){
                       alert('mouseenter function is running !');
                      },function(){
                              alert('mouseleaver function is running !');
                         });
分享到:
评论

相关推荐

    jquery鼠标事件的小例子

    这个"jquery鼠标事件的小例子"旨在帮助初学者更好地理解如何在jQuery中使用鼠标事件,同时结合CSS来实现交互效果。 首先,让我们深入了解一下jQuery中的鼠标事件。jQuery封装了许多原生JavaScript中的鼠标事件,...

    jQuery鼠标事件总结

    下面就来系统的介绍一下jQuery鼠标事件。 (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。 $('p').click(function(){ alert('click function is running !'); } ); ...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....

    jquery鼠标滚轮事件支持插件

    在给定的“jquery鼠标滚轮事件支持插件”中,我们关注的是如何利用jQuery扩展来处理鼠标的滚轮事件。这个插件允许开发者监听和响应用户滚动鼠标的滚轮,从而在网页上实现更加动态和交互的功能。 标题中的“jquery...

    jquery鼠标滚轮事件

    "jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中,我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...

    jQuery事件之鼠标事件

    ### jQuery中的鼠标事件详解 #### 一、引言 在前端开发中,处理用户的交互行为是必不可少的一部分。jQuery作为一款流行的JavaScript库,极大地简化了这些交互的处理方式。本文将重点介绍jQuery中与鼠标相关的事件...

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 ...

    jQuery鼠标滑过和鼠标点击圆形图片特效

    **jQuery鼠标事件** 在jQuery中,有多种与鼠标相关的事件可以使用,如`mouseover`和`mouseout`以及`click`。`mouseover`事件在鼠标指针进入元素时触发,而`mouseout`则在鼠标离开元素时触发。`click`事件则是在用户...

    jQuery鼠标悬停图片震动特效.zip

    《jQuery鼠标悬停图片震动特效》 在网页设计中,动态效果往往能吸引用户的注意力,提升用户体验。"jQuery鼠标悬停图片震动特效"就是这样一种巧妙的技术应用,它结合了CSS3的圆角样式和jQuery库,实现了当鼠标悬停在...

    jquery实现鼠标移动出现提示信息

    标签“jQuery 实现鼠标移动 提示信息”表明这项功能涉及到的技术点,包括 jQuery 库、鼠标移动事件和提示信息的显示。 部分内容解析 部分内容中提到了作者的个人经历,例如孩子的生日和个人项目的需求。然后,作者...

    jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip

    本项目"jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip"是利用jQuery实现的一种交互效果,特别是针对鼠标滚动事件的处理,用于创建动态且吸引人的宣传页面。这个压缩包包含了一个基于HTML5、CSS和...

    jQuery鼠标事件汇总

    鼠标事件是用户与网页交互的常见方式之一,而jQuery作为流行的JavaScript库,提供了一套完整且简洁的方式来处理各种鼠标事件。本文汇总了jQuery中常用的鼠标事件,包括它们的定义、语法和用法,以及如何在实际项目中...

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery鼠标滑过图片显示个人具体信息

    jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息

    jquery捕获鼠标事件提示.zip

    本教程将深入探讨如何使用jQuery来捕获鼠标事件并创建提示效果。 首先,`index.html`是网页的结构文件,通常包含了HTML元素,如`<head>`用于设置页面元数据,`<body>`用于展示内容,以及引用外部资源如CSS样式表和...

    jquery 体育馆场馆鼠标拖动事件

    一、jQuery鼠标拖动事件 在jQuery中,没有直接提供一个名为“拖动”(drag)的事件,但我们可以结合`mousedown`、`mousemove`和`mouseup`事件来模拟实现拖动行为。这三个事件分别对应于鼠标的按下、移动和释放,...

    jQuery鼠标经过星星显示特效.rar

    jQuery鼠标经过星星显示特效.rar jQuery鼠标经过星星显示特效.rar jQuery鼠标经过星星显示特效.rar jQuery鼠标经过星星显示特效.rar jQuery鼠标经过星星显示特效.rar jQuery鼠标经过星星显示特效.rar jQuery鼠标经过...

    jquery 鼠标移入显示悬浮框

    在网页设计中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了JavaScript代码,使得诸如鼠标事件处理、动画效果和DOM操作变得更加便捷。本主题聚焦于"jQuery 鼠标移入显示悬浮框",这是一个常见的交互设计...

    jQuery鼠标滑过点击事件音效试听.zip

    总结起来,"jQuery鼠标滑过点击事件音效试听"插件是将jQuery的事件处理能力与HTML5音效结合的实例,它通过监听鼠标事件触发音效播放,增强了网页的互动性和用户体验。开发者可以借此学习如何使用jQuery实现类似的...

    jQuery各种鼠标事件

    介绍了jQuery的各种鼠标事件,方便jquery不是很好的童鞋参考

Global site tag (gtag.js) - Google Analytics