单击隐藏：

 <!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. Impala通过JDBC方式访问

    不多说,直接上干货! • 配置: – impala.driver=org.apache.hive.jdbc.HiveDriver – impala.url=jdbc:hive2://node2:210 ...

  2. C#导出EXCEL(DataTable导出EXCEL)

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.I ...

  3. spark源码阅读

    根据spark2.2的编译顺序来确定源码阅读顺序,只阅读核心的基本部分. 1.common目录 ①Tags②Sketch③Networking④Shuffle Streaming Service⑤Un ...

  4. spring boot 热启动

    spring boot热启动有两种方式 1. 以Maven插件的形式去加载,所以启动时使用通过Maven命令mvn spring-boot:run启动,而通过Application.run方式启动的会 ...

  5. 请妥善保管自己的QQ等网络帐号

    自从2008年以来,太多的同学.朋友,QQ等网络帐号被盗. 然后,盗号者来骗钱.比如 借用账号.帮忙支付费用等. 盗号者固然可恶,传统骗子的网络版. 可是,这些帐号的主人就仅仅是可怜么? 自己的号被盗 ...

  6. 【Henu ACM Round #12 C】 Alice, Bob, Two Teams

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑任意两个字符串(a,b) 假设a在b的前面 那么如果a+b>=b+a 这里的+表示字符串的链接 那么显然需要交换a,b的位 ...

  7. mycat 不得不说的缘分（转）

    ,尾声,左兄与任正非.leader-us与马云 新成立的公司里面,有个左兄,很传奇,大一在大学入伍,然后复员专业,来上海学IT,年纪轻轻,睡在地铁站,苦心专研数据库.系统.中间件,现在已经成为了业界大 ...

  8. checkbox-padding 调整checkbox字体跟图标距离

    有时候我们会遇到需要调整控件中的内容相对于容器的位置.这里有两种情况 1.linearlayout这样的容器中,包含button类的控件,这时候margin可以调节 2.textview中的文字内容 ...

  9. Android控件开发之Gallery3D效果

    package xiaosi.GalleryFlow; import android.app.Activity; import android.os.Bundle; public class Gall ...

  10. BZOJ1195: [HNOI2006]最短母串（Trie图，搜索）

    Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. Input 第一行是一个正整数n(n<=12) ...