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

mousedown:鼠标按下才发生

mouseup:鼠标按下松开时才发生

mouseenter和mouseleave效果和mouseover mouseout效果差不多；但存在区别，区别见代码解析：

css代码：

 <style>

             .cc,.dd{

                 height: 80px;

                 width: 300px;

                 border: 1px solid black;

             }

             .ff,.ee{

                 height: 200px;

                 width: 300px;

                 background-color: darkgrey;

                 border:1px solid red;

                 text-align: center;

             }

         </style>

html代码：

 <body>

         <div class="aa">1、please press down your mouse button</div><br />

         <div class="bb">2、please press up your mouse button</div><br />

         <div class="cc">

             3、mouseenter：颜色变红

             mouseleave：颜色变灰

         </div><br />

         <div class="dd">

             4、mouseover：颜色变黄

             mouseout：颜色变灰

         </div><br />

         <div class="ff"> 5、<p style="">mouseout事件在鼠标离开任意一个子元素及选的元素时触发</p><span></span> </div><br />

         <div class="ee"> 6、<p style="">mouseleave事件只在鼠标离开选取的的元素时触发。</p><span></span>  </div>

     </body>

jqery代码：

 <script>

 //当鼠标按下时会显示

         $(".aa").mousedown(function(){

             $(this).after("<p>when mouse button press down</p>")

         });

 //当鼠标按下松开时发生的

         $(".bb").mouseup(function(){

             $(this).after("<p>when mouse button press up</p>")

         });

 //当鼠标enter/leave

         $(".cc").mouseenter(function(){

             $(".cc").css("background-color","red")

         });

          $(".cc").mouseleave(function(){

             $(".cc").css("background-color","grey")

         });

  //当鼠标mouseover/mouseout

        $(".dd").mouseover(function(){

            $(".dd").css("background-color","yellow")

        });

        $(".dd").mouseout(function(){

            $(".dd").css("background-color","grey")

        });

  //mouseleave 与 mouseout 的区别

  x=;

  y=;

  $(".ff").mouseout(function(){

      $(".ff span").text(x+=);

  })

  $(".ee").mouseleave(function(){

      $(".ee span").text(y+=);

  })

  //mouseenter,mouseover同理

  //mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。

 //mouseenter 事件只在鼠标移动到选取的元素上时触发。

 </script>

Jquery-鼠标事件的更多相关文章

  1. 深入学习jQuery鼠标事件

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

  2. JQuery 鼠标事件简介

    mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,mouseout事件于用户把鼠标移出一个元素时触发. 下面为你详细介绍下jquery中的鼠标事件: (1):click事件:cl ...

  3. jQuery鼠标事件

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

  4. jquery 鼠标事件汇总

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法   鼠标事件是在用户移动鼠标 ...

  5. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  6. jQuery鼠标事件汇总

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(func ...

  7. Jquery 鼠标事件解析

    1 mouseover与mousemove的区别: mouseover是当鼠标移动到对象时产生,只产生一次,这时如果继续在对象上移动,不会再产生mouseover事件,而是mousemove事件,mo ...

  8. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  9. jQuery-3.事件篇---鼠标事件

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  10. JQuery事件之鼠标事件

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

随机推荐

  1. 开源自己写的一个拖拽库，兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...

  2. 简单的记录，VMware Tools的安装

    VMware Tools是VMware虚拟机中自带的一种增强工具,只有在VMware虚拟机中安装好了VMware Tools,才能实现主机与虚拟机之间的文件共享,同时可支持自由“拖拽”的功能来对传文件 ...

  3. Charles Proxy代理使用简要说明

    1.去官网下载免费试用版: http://www.charlesproxy.com/ (需要机器有Java运行时)或下载破解注册版:http://charles.iiilab.com/,安装后开启默认 ...

  4. 学习css3中的动画

    css animations 主要有两块构成,那么是哪两块呢? keyframes : 定义了什么阶段展示什么样的动画 animation 属性 :把动画挂载到一个具体的dom上,并且定义如何动起来: ...

  5. python读写文件相关内容

    1.python读取文件 f = open('E:/info.txt', 'r')#用read的方式打开a = 0for line in f.readlines():读取没一行,就是读取所有文件的意思 ...

  6. 表单的get和post使用情景

    GET和POST两种方法都是将数据送到服务器,但你该用哪一种呢? HTTP标准包含这两种方法是为了达到不同的目的.POST用于创建资源,资源的内容会被编入HTTP请示的内容中.例如,处理订货表单.在数 ...

  7. less函数

    问题描述: 在编写页面时,有以下几种按钮: 这时候我们CSS代码毫无疑问写一个公共类,然后再为每个按钮增加独自的样式如下: HTML: <div class="common a&quo ...

  8. 抓包工具 - Fiddler（详细介绍）

    Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够,且firebug常常是需要 ...

  9. SQL中创建外键约束

    alter table 表名 add constraint 外键约束名 foreign key(列名) references 引用外键表(列名)

  10. 深入理解JavaScript中的闭包

    闭包没有想象的那么简单 闭包的概念在JavaScript中占据了十分重要的地位,有不少开发者分不清匿名函数和闭包的概念,把它们混为一谈,我希望借这篇文章能够让大家对闭包有一个清晰的认识. 大家都知道变 ...