单击隐藏：

 <!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. BZOJ 1571 DP

    思路: 预处理出在能力值为i的时候 滑雪一次的最小时间 f[i][j]表示i时间 j的能力值 最多的滑雪次数 我先用vector 把课程按起点push进去 1. for(int k=0;k<ve ...

  2. WinRAR 5.21 去弹窗 疑惑

    WinRAR 突然就有弹窗广告了 ,找了个方法,重新写一下安装目录下的 rarreg.key,确实有效果但是重写的和之前的完全一样啊,至少在文本中完全一样,怎么回事. 下面附上两个文件, 1.key ...

  3. 深入理解Android（4）——理解Android中的JNI（下）

    在前面文章中简单介绍了JNI,这一篇文章来简单看一下jni.h中定义的一些常用方法,来实现通过C++调用Android中的Java代码. 转载请说明出处:http://blog.csdn.net/da ...

  4. javafx KeyCombination

    import javafx.application.Application; import javafx.application.Platform; import javafx.event.Actio ...

  5. css3+jq--小箭头旋转180度案例

    html: <aside class="tea_getBtn"> <div class="w"> <span class=&quo ...

  6. WebMethod Description

    http://www.webxml.com.cn/WebServices/WeatherWebService.asmx https://www.cnblogs.com/wanganyi/p/72202 ...

  7. mkfs---创建Linux文件系统

    [root@xiaolizi ~]# mkfsmkfs mkfs.btrfs mkfs.cramfs mkfs.ext2 mkfs.ext3 mkfs.ext4 mkfs.minix mkfs.xfs ...

  8. [C++11] 默认构造函数

    类通过一个特殊的构造函数来控制默认初始化过程.这个函数就是默认构造函数.默认构造函数无需不论什么实參. 我们能够显示的定义默认构造函数也能够让编译器为我们生成默认构造函数. 默认构造函数以例如以下规则 ...

  9. Android获取当前连接的wifi名称

    首先AndroidMainfest.xml文件里加入权限: <uses-permission android:name="android.permission.ACCESS_NETWO ...

  10. javascript 获​取​H​T​M​L​ ​D​O​M​父​,​子​,​临​近​节​点

    在Web应用程序特别是Web2.0程序开发中.常常要获取页面中某个元素,然后更新该元素的样式.内容等.怎样获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有非 ...