<!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. 一些简单的SQL Server服务器监控

    1:磁盘活动的一些监控 指标 吞吐量:IOPS,存储子系统每秒能提供多少次I/O 吞吐量,MB/S,I/O子系统每秒能提供多少MB 延时:每个I/O请求占用多少时间 队列长度:队列中有多少IO请求在等 ...

  2. 转：tomcat安全设置

      小程序部署上去后,用户反馈说存在注入入侵等风险.反省之,记录下来 最省事的办法,直接删除%tomcatRoot%/webapps下的所有文件夹,仅仅保留自己部署的工程 前提是你不需要监控程序的一些 ...

  3. c基础_笔记_1

    定义变量 int i; 也可以 int i,num; 赋值,c必须先定义变量再赋值 num = 0; 循环for for(i=1; i<=0; i++) { printf("%d \n ...

  4. 给category添加基本数据类型属性

    给category添加基本数据类型属性 说明 通常,我们添加属性都是通过对象扩展来实现的,其实,我们也可以用runtime来添加基本数据类型的属性 源码 // // UIView+AnimationP ...

  5. Linux seq命令详解

    seq: squeue  是一个序列的缩写,主要用来输出序列化的东西 seq常见命令参数 用法:seq [选项]... 尾数 或:seq [选项]... 首数 尾数 或:seq [选项]... 首数 ...

  6. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  7. webshell扫描

    可扫描 weevelyshell 生成 或加密的shell 及各种变异webshell 目前仅支持php 支持扫描 weevelyshell 生成 或加密的shell 支持扫描callback一句话s ...

  8. n=n+1 放在print(s)的上面的影响 (2) n=n=+1在前面,则不满足前面<100条件时候,才跳出while的循环,这时候while循环结束, 到了外面的下一步-->print()

    1+2+3+....+100=     ? n=1 s = 0 while n < =100: s = s+n n= n+1 # n=n+1    在print(s)上面的情况 print(s)

  9. Call to undefined function mysqli_connect() in xx.连接数据库出现mysqli_connect()未定义的问题。

    这个是我在执行php代码的时候出现的一个错误,我在网上查了好久,也按照网上常用的方法去修改,都没有效果. 例如:1.新建一个php文件: <?php print phpinfo(); ?> ...

  10. Mac pycharm专业版安装以及破解方法

    1.先在Pycharm官网,或者直接输入网址:http://www.https://www.jetbrains.com/pycharm/ 2.修改hosts文件 sudo vim /etc/hosts ...