单击隐藏：

 <!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. 数据持久化(六)之Using CoreData with MagicalRecord

    第五节里面,我介绍了CoreData的配置和主要的增删改查,可能非常多人会认为用它真繁琐.这里,我再介绍网上大神对它进行了人性化封装的第三方MagicalRecord,正如FMDB对sqlite进行了 ...

  2. Day5费用流

    算法 zkw费用流:多路增广,增光D[y]=D[i]+c的边 无源汇上下界最小费用可行流 每次强行增加下界的流量 类似网络流,拆边 原边的费用为c,拆出来的边费用为0 负边和负圈 直接应用 SDOI2 ...

  3. 洛谷P1722 矩阵 II

    题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(usqwedf:这不是一个2 ...

  4. janos.io

    http://janos.io/ https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/Porting

  5. 【CS Round #39 (Div. 2 only) A】Removed Pages

    [Link]: [Description] [Solution] 每读入一个x; 把a[(x-1)/2]置为1即可; 统计1的个数 [NumberOf WA] [Reviw] [Code] /* */ ...

  6. UVA - 10167 - Birthday Cake （简单枚举）

    思路:简单枚举 AC代码: #include <cstdio> #include <cstring> #include <iostream> #include &l ...

  7. JavaScript作用域闭包（你不知道的JavaScript）

    JavaScript闭包.是JS开发project师必须深入了解的知识. 3月份自己曾撰写博客<JavaScript闭包>.博客中仅仅是简单阐述了闭包的工作过程和列举了几个演示样例,并没有 ...

  8. C++ 为什么要virtual析构函数

    class A { public: A() { printf("A()\n"); } virtual ~A() { printf("~A()\n"); } }; ...

  9. uiautomator——第一个例子：打开浏览器，输入网址

    1.在sdk安装目录:E:\Test_Tools\auto_test\app\adt-bundle-windows-x86-20131030\sdk\tools下启动uiautomatorviewer ...

  10. Docker 内程序时间设置，很重要

    原文:Docker 内程序时间设置,很重要 重要!!!!! 创建容器时候需要修改一个参数,设置tomcat的时区 -e TZ="Asia/Shanghai" -v /etc/loc ...