<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>鼠标事件</title>

            <script src="js/jquery.js"></script>

        <style>

        .me{ 

            border: 1px solid red;

            margin-top: 75px;

            width: 400px;

            height: 150px;

            background-color: #ccc;

            overflow: auto;

        }

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

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

                    $("input").css("background-color","lightblue");

                });

                //移动进入的时候触发mouseover,移出时触发mouseout

                //在jQuery中提供了个hover() 带两个参数 是 鼠标移动进入时执行的函数和鼠标移动出执行的函数

                $(".me").hover(function(){

                    //移入执行的函数

                    $(this).css("background-color","red");

                },function(){

                    //移出执行的函数

                    $(this).css("background-color","#ccc");

                })

                //给整个文档绑定鼠标移动事件

                //在事件处理函数中有一个默认参数 事件对象event 它包含了事件产生的信息

                $(document).on("mousemove",function(event){

                    var x=event.pageX//鼠标在文档X坐标

                    var y=event.pageY//鼠标Y坐标

                    $("#div1").text("X:"+x+"Y:"+y);

                });

                //双击放大DIV

                $(".me").on("dblclick",function(){

                    $(this).width();

                    $(this).height();

                });

                //停止双击事件向父层传播

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

                    event.stopPropagation();

                });

            })

        </script>

    </head>

    <body>

        <div>

            <div id="div1">在这里显示坐标</div>

            <div class="me">事件测试案例

            <input type="text" /><br>

            <button>提交</button>

            </div>

        </div>

    </body>

</html>

jQuery学习-鼠标事件的更多相关文章

  1. jQuery的鼠标事件总结

    jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...

  2. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  3. jquery学习笔记-----事件和动画

    一.ready机制 $(document).ready( function(){} ) $().ready( function(){} ) $( function(){} )  jquery的read ...

  4. Python+Selenium学习--鼠标事件

    场景 前景讲解了鼠标的click()事件,而我们在实际的web产品测试中,有关鼠标的操作,不仅仅只有单击,有时候还包括右击,双击,拖动等操作,这些操作包含在ActionChains类中. Action ...

  5. jQuery学习笔记——事件

    何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...

  6. jquery 的鼠标事件/淡入淡出/绑定

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. jQuery学习三——事件

    代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...

  8. JQuery学习：事件绑定&入口函数&样式控制

    1.基础语法学习: 1.事件绑定 2.入口函数 3.样式控制 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. jQuery学习-键盘事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. MVC技术的面试问题

    MVC中的三种方式: ORM框架:对象关系映射关系 ,面向对象的对象模型和关系型数据之间的相互转换.基于关系型数据库的数据存储,实现一个虚拟的面向对象的数据访问接口.只要提供了持久化类与表的映射关系, ...

  2. 使用cnpm install提示package not found

    使用cnpm install 的时候提示Can't find package. 在cnpm package里能搜索到scratch-audio的包,但版本是0.1.0-prerelease.20190 ...

  3. 【1】python-正则表达式语法规范与案例

    正则表达式的用法与案例分析 2018-08-24 21:26:14 [说明]:该文主要为了随后复习和使用备查,由于做了word文档笔记,所以此处博文没有怎么排版,没放代码,以插入图片为主, 一.正则表 ...

  4. c++作业之圆面积

    代码传送门

  5. Redis info参数总结

    可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一块数据. 下面是针对info的输出在旁边注释了,因为对Redis ...

  6. .NET Core 控制台项目中的Nuget打包类库及引用

    由于使用的是MAC版本的VSCode,所以全部是通过dotnet命令来完成的. 1.dotnet new lib 创建类库项目: 2.编辑项目根目录下的.csproj文件,添加版本号(建议): < ...

  7. T440安装Win7系统

    于T440自带的是Win8系统,硬盘格式为GPT分区格式,而Win7必须要MRP格式,所以必须要将硬盘格式从GPT修改为MRP,方法如下: 准备工作,下载”电脑店U盘启动盘制作工具“(百度一下,去官网 ...

  8. 「GXOI / GZOI2019」与或和

    题目 广西和贵州的省选?好像很神仙的样子啊 之后发现这是一道水题 我们显然应该拆位考虑 显然我们应该对于每一位都拆一下看看这一位是\(0/1\) 显然我们如果找到一个全是\(1\)的矩阵,那么这一位的 ...

  9. Hive学习之路 （十四）Hive分析窗口函数(二) NTILE,ROW_NUMBER,RANK,DENSE_RANK

    概述 本文中介绍前几个序列函数,NTILE,ROW_NUMBER,RANK,DENSE_RANK,下面会一一解释各自的用途. 注意: 序列函数不支持WINDOW子句.(ROWS BETWEEN) 数据 ...

  10. Python：基础知识（一）

    输入 input():接收命令行下输入 1)在py2下:如果你输的是一串文字,要用引号''或者""引起来,如果是数字则不用. 2)在py3下:相当于py2的raw_input(), ...