<!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. Vue2学习笔记:class和style

    1.用法 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  2. 五十个小技巧提高PHP执行效率

    在项目开发过程中,经常遇到了一些PHP处理程序性能底下的情况,程序运行在centos+nginx环境,虽然这个有很多的原因如:服务器本身配置,运行环境nginx服务,php-fpm配置等等,更多有一点 ...

  3. 解决hibernate双向关系造成的一方重复执行SQl，或者死循环的问题

    系统采用struts-json hibernate3. 在对关联表配置manytoone onetomany双向关联的时候,在执行一方的时候,会发现打印出来的SQL语句多执行了一次或者多次.经过调试, ...

  4. 学习python第五天进制转换

    6.进制之间的转换(重要) 二进制:满二进一 范围:0.1符号:0b例如:0b10...[注意]计算机只能识别二进制数据 八进制:满八进一 范围:0~7符号:0o例如:0o66 十进制:满十进一 范围 ...

  5. java面向切面编程总结-面向切面的本质

    面向切面的本质:定义切面类并将切面类的功能织入到目标类中: 实现方式:将切面应用到目标对象从而创建一个新的代理对象的过程.替换: 使用注解@Aspect来定义一个切面,在切面中定义切入点(@Point ...

  6. HashMap,LinkedHashMap和Hashtable类的深入剖析与理解

    上一篇文章写了一些关于HashMap以及HashMap的线程安全问题,这篇文章再来说说Map系列中HashMap,LinkedHashMap和Hashtable三者之间的差异以及该注意的地方. Has ...

  7. [SCOI2007]组队

    嘟嘟嘟 这题有人说部分分O(n3)暴力,然而我暴力都没写过,调了半天也没用……还是看题解吧 首先,咱把A * ( h – minH ) + B * ( s – minS ) <= C 变个型,得 ...

  8. Hadoop学习之路（十三）MapReduce的初识

    MapReduce是什么 首先让我们来重温一下 hadoop 的四大组件: HDFS:分布式存储系统 MapReduce:分布式计算系统 YARN:hadoop 的资源调度系统 Common:以上三大 ...

  9. Odoo图片如何显示

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9281423.html odoo没有专门的图片标签,但是可以通过widget来控制field标签来显示图片内容. ...

  10. idea 如何优雅的添加.ignore 忽略不必要提交的文件

    最近有点时间然后就跑去搜了下idea热门的插件,一不小心发现了一个.ignore插件.有过在idea使用git都知道.gitignore文件,而这个插件就是能优雅的帮我们做这件事. 首先先讲下安装这个 ...