以防自己忘记,最重要的是hover效果的

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
   (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 !');
                         });

jq之鼠标事件的更多相关文章

  1. jq鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.   (1)click单击鼠标事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发.        $('p').cl ...

  2. day53 鼠标事件 键盘事件 及JQuery

    复习 // 语法: ECMAScript 操作: DOM BOM // 1.类型转化 // 转数字: +"3.14" | parseInt("123abc") ...

  3. Javascript和jquery事件--鼠标事件的小结

    1.鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout. <1>其中mouseup和mous ...

  4. 7.JAVA之GUI编程鼠标事件

    鼠标事件: 功能: 1.基本窗体功能实现 2.鼠标移动监听,当鼠标移动到按钮上时,触发打印事件. 3.按钮活动监听,当按钮活动时,触发打印事件. 4.按钮被单击时触发打印事件. 源码如下: impor ...

  5. 手持设备点击响应速度,鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  6. css屏蔽元素的鼠标事件pointer-events

    // 屏蔽点击 $('body').css('pointer-events', 'none'); //恢复默认 $('body').css('pointer-events', 'auto');   用 ...

  7. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  8. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  9. winform/窗体鼠标事件编程中的几个问题

    1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...

随机推荐

  1. python正则中的贪婪与非贪婪

    当重复一个正则表达式时,如用 a*,操作结果是尽可能多地匹配模式.当你试着匹配一对对称的定界符,如 HTML 标志中的尖括号.匹配单个 HTML 标志的模式不能正常工作,因为 .* 的本质是“贪婪”的 ...

  2. Tomcat服务器改主页 & jeesite框架改首页

    Tomcat服务器改主页: 方法一: 把原来的 ROOT 目录清空: 发布你自己的项目到 ROOT 目录下: 发布程序 /webapps/ROOT/WEB-INF/web.xml 中需要有默认首页定义 ...

  3. Java链接MySql数据库(转)

    import java.sql.*; public class JDBCTest { public static void main(String[] args){ // 驱动程序名 String d ...

  4. 一段经典的 Java 风格程序 ( 类,包 )

    前言 本文给出一段经典的 Java 风格程序,请读者初步体会 Java 和 C++ 程序的不同. 第一步:编写一个类 // 将这个类打包至 testpackage 包中 package testpac ...

  5. 数据挖掘项目之---通过对web日志的挖掘来实现内容推荐系统

    先说一说问题,不知道大家有没有这样的经验,反正我是经常碰到. 举例1,某些网站每隔几天就发邮件给我,每次发的邮件内容都是一些我根本不感兴趣的东西,我不甚其扰,对其深恶痛绝.         举例2,添 ...

  6. C# WPF DataGrid控件实现三级联动

    利用DataGrid控件实现联动的功能,在数据库客户软件中是随处可见的,然而网上的资料却是少之又少,令人崩溃. 本篇博文将介绍利用DataGrid控件模板定义的三个ComboBox实现“省.市.区”的 ...

  7. 2018-11-13-常用模块1 (time random os sys)

    1.时间模块 time 2.随机数模块 random 3.与操作系统交互模块 os 4.系统模块 sys 在我们真正开始学习之前我们先解决下面几个问题,打好学习模块的小基础,以便更好的学习模块. (1 ...

  8. meteor---在合并打包多个文件ZIP下载的功能

    实现多个文件边打包边下载的功能,速度还可以,本人亲测,欢迎大家来指点archiver --用NPM安装这个模块---本人文件存储在file-collection 中,可以用fs : fs.create ...

  9. checkbox 背景图片 纯CSS处理办法

    CSS .table_container input[type="checkbox"] { background: #fff url(/img/blue.png); backgro ...

  10. 【C++基础学习】Vector

    代码练习: #include <iostream> #include <vector> using namespace std; int main(){ cout <&l ...