• JQuery事件之鼠标事件


    JQuery事件是什么?

    JQuery事件是指,页面对不同访问者的响应。事件处理程序指的是当HTML中发生某些事件时所调用的方法

    例:在元素上移动鼠标

    选取单选按钮

    点击元素

    鼠标事件包括:click()方法、dblclick()方法、mouseenter()方法、mouseleave()方法、hover()方法、

    一、click()方法

    当点击元素时,发生click事件

    Click()方法触发click事件。或规定当发生click事件时运行的函数

    实例:

    $(document).ready(function(){

              $("p").click(function(){

                 alert("点我干啥");

              });

              });

    触发被选元素的click事件:

    语法:$(selector).click()

    实例:

    <script>

            // 触发被选元素的click事件:

            $(document).ready(function(){

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

                 $("p").click();

                });

            });

     

        </script>

    </head>

    <body>

        <button>触发p元素上的click事件</button>

        <p onclick="alert('点我干哈?')">点我</p>

        

    </body>

    添加函数到click事件

    语法:$(selector).click(function)

    二、dblclick()方法

    用法:当双击元素时,触发dblclick事件

    dblclick() 方法触发dblclick事件,或规定当发生dblclick事件时运行的函数

    dblclick事件也会产生click事件。如果这两个事件都被应用于同一个元素,会产生问题。

    触发被选中的dblclick事件:

    语法:$(selector).dblclick()

     $(document).ready(function(){

         $("p").dblclick(function(){

             alert("疼死啦");

         });

        });

    添加函数到dblclick事件:

    语法:$(selector).dblclick(function)

      $(document).ready(function(){

            $("p").dblclick(function(){

                $(this).fadeOut();

            });

        });

    三、mouseenter()方法

    用法:当鼠标指针穿过(进入)被选元素时,会发生mouseenter事件

          Mouseenter()方法触发mouseenter事件。或添加当发生mouseenter事件时运行的函数。

    注意:与mouseenter事件不同,mouseenter事件只有在鼠标指针进入被选元素时被触发。

                mouseenter事件在鼠标指针进入任意元素时也会被触发。该事件通常与mouseleave事件一起使用。

    触发被选元素的mouseenter事件:

    语法:$(selector).mouseenter()

    $(document).ready(function(){

          $("p").mouseenter(function(){

           $("p").css("background-color","yellow");

          });

          $("p").mouseleave(function(){

              $("p").css("background-color","lightgray");

          });

          $("#btn1").click(function(){

           $("p").mouseenter();

          });

          $("#btn2").click(function(){

              $("p").mouseleave();

          });

    });

    <body>

       <p>这是一个段落</p>

       <button id="btn1">触发mouseenter事件</button>

       <button id="btn2">触发mouseleave事件</button>

        

    </body>

     

    mouseovermouseenter的区别

    Mouseover事件在鼠标移动到选取的元素及其子元素上时触发

    Mouseenter事件只在鼠标移动到选取的元素上时触发

    添加函数到mouseenter事件

    语法:   $(selector).mouseenter(function)

    $(document).ready(function(){

          $("p").mouseenter(function(){

              $("p").css("background-color","yellow");

          });

          $("p").mouseleave(function(){

           $("p").css("background","lightgray");

          });

         });

     四、mouseleave事件

    当鼠标指针离开被选元素时,会发生mouseleave事件

    Mouseleave()方法触发mouseleave事件,或添加当发生mouseleave事件时运行的函数。

    注意:与mouseout事件不同,mouseleave事件只有在鼠标指针离开被选元素时被触发,

                   mouseout事件在鼠标指针离开任意子元素时也会被触发。

        通常与mouseenter事件一起使用。

    触发被选元素的mouseleave事件

    语法:$(selector).mouseleave()

    五、hover()方法

    hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数,方法触发mouseentermouseleave事件。

    注:如果只指定一个函数,则mouseentermouseleave都执行它。

    语法:

    $(selector).hover(inFunction,outFunction)

    调用:$(selector).hover(handlerIn,handlerOut)

    和以下方式等同:$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    如果只规定了一个函数,则他将会在mouseentermouseleave事件上运行。

    $(selector).hover(handlerInOut)等于$(selector).on(“mouseenter mouseleave”,handlerInOut);

    inFunction,必需,规定mouseenter事件发生时运行的函数

    outFunction  可选,规定mouseleave事件发生时运行的函数

    实例:

    $(document).ready(function(){

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

                $("p").css("background-color","yellow");

     

            },function(){

                $("p").css("background-color","pink");        

    });

        });

  • 相关阅读:
    hbase 相关
    java 连接 hiveserver2 例子
    ik_max_word ik_smart 区别 和 单字 查询 不到问题
    如何计算地址线和数据线
    golang consistent hash 菜鸟分析
    借助GitHub托管你的项目代码
    PHP性能追踪及分析工具xhprof的安装与使用
    git使用方法
    go开发
    go的websocket实现
  • 原文地址:https://www.cnblogs.com/maleijiejie/p/13434175.html
Copyright © 2020-2023  润新知