单击隐藏：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>点击按钮隐藏</title>

 <script>

 $(document).ready(function(){

   $("button").click(function(){

     $(this).hide();

   });

 });

 </script>

 </head>

 <!-- 点击按钮之后，按钮隐藏 -->

 <body>

 <button>点我</button>

 </body>

 </html>

双击隐藏：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>双击点击消隐藏</title>

 <script>

 $(document).ready(function(){

   $("button").dblclick(function(){

     $(this).hide();

   });

 });

 </script>

 </head>

 <body>

 <button>双击点我隐藏</button>

 <!-- 双击按钮之后将隐藏 -->

 </body>

 </html>

鼠标移进事件：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>鼠标移进事件</title>

 <script>

 $(document).ready(function(){

   $("#p1").mouseenter(function(){

     alert('您的鼠标移到了 id="p1" 的元素上!');

   });

 });

 </script>

 </head>

 <body>

 <p id="p1">鼠标指针进入此处，会看到弹窗。</p>

 <!-- 鼠标移进标签，弹出对话框 -->

 </body>

 </html>

鼠标移出案例：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>鼠标移出案例</title>

 <script>

 $(document).ready(function(){

   $("#p1").mouseleave(function(){

     alert("再见，您的鼠标离开了该段落。");

   });

 });

 </script>

 </head>

 <body>

 <p id="p1">这是一个段落。</p>

 <!-- 移出弹出对话框-->

 </body>

 </html>

在段落按下案例：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>段落按下</title>

 <script>

 $(document).ready(function(){

   $("#p1").mousedown(function(){

     alert("鼠标在该段落上按下！");

   });

 });

 </script>

 </head>

 <body>

 <p id="p1">这是一个段落</p>

 <!-- 在段落按下弹出对话框-->

 </body>

 </html>

鼠标在段落松开：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>在段落松开</title>

 <script>

 $(document).ready(function(){

   $("#p1").mouseup(function(){

     alert("鼠标在段落上松开。");

   });

 });

 </script>

 </head>

 <body>

 <p id="p1">这是一个段落。</p>

 </body>

 </html>

鼠标进入和离开案例：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script>

 $(document).ready(function(){

     $("#p1").hover(

         function(){

             alert("你进入了 p1!");

         },

         function(){

             alert("拜拜! 现在你离开了 p1!");

         }

     )

 });

 </script>

 </head>

 <body>

 <p id="p1">这是一个段落。</p>

 </body>

 </html>

jQuery----鼠标移动、点击案例的更多相关文章

  1. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  2. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  3. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  4. jQuery鼠标事件

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

  5. jquery 鼠标事件汇总

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

  6. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  7. jquery鼠标点击穿透的解决方法

    jquery鼠标点击穿透的解决方法 <pre><div class="showcontainer" style="background:#000;dis ...

  8. 深入学习jQuery鼠标事件

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

  9. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

随机推荐

  1. 调用google翻译

    1. [代码]maven依赖     ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <dependency>     <groupId>org.a ...

  2. Android图像处理之冰冻效果

    原图                                                                          效果图 代码: package com.colo ...

  3. ubuntu 分屏工具

    本文提到的分屏工具,均可通过sudo apt-get install的方式进行安装: 基本:terminator 高级:tmux,screen 还可进一步使用:ctrl + superkey + 方向 ...

  4. c++中重载、重写、覆盖的区别

    Overload(重载):在C++程序中,可以将语义.功能相似的几个函数用同一个名字表示,但参数或返回值不同(包括类型.顺序不同),即函数重载.(1)相同的范围(在同一个类中):(2)函数名字相同:( ...

  5. 怎样及时检测出非正常断开的TCP连接(zz)

    此处的”非正常断开”指TCP连接不是以优雅的方式断开,如网线故障等物理链路的原因,还有突然主机断电等原因有两种方法可以检测:1.TCP连接双方定时发握手消息 2.利用TCP协议栈中的KeepAlive ...

  6. readonly&&declare&&unset &&export&&env环境变量

    readonly命令用于定义只读shell变量和shell函数.readonly命令的选项-p可以输出显示系统中所有定义的只读变量. 选项 -f:定义只读函数: -a:定义只读数组变量: -p:显示系 ...

  7. Mblog 部署手册

    准备工作 安装 JDK8 安装图片处理工具:GraphicsMagick1.3.20,下载地址 安装 Maven 准备 IDE (如果你不看源码,可以忽略下面的步骤,直接通过Maven编译war包) ...

  8. 【直接拿来用のandroid公共代码模块解析与分享】の Notification和NotificationManager

    本文源代码托管在https://github.com/ASCE1885/asce-common,欢迎fork Android项目做得多了.会发现原来非常多基础的东西都是能够复用,这个系列介绍一些自己项 ...

  9. HDU 3487(Play with Chain-Splay)[template:Splay]

    Play with Chain Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. 微软自拍应用iOS版公布

    微软自拍(Microsoft Selfie)主要是支持自拍后还能加强自拍效果的功能. 只是和其它自拍应用不同的是.Microsoft Selfie 利用了机器学习来增强照片,应用会"考虑年龄 ...