JQuery Web端视觉

jquery事件切换

2020-10-21 10:59发布

站内文章 / jQuery
946 0 0

jquery事件切换

  • 逐个添加事件

    需要几个事件，就天添加几次，每次是对象调用函数

  • 链接方式

    方法返回当前对象

  • 切换方式

    hover函数接收两个函数（如A,B)

    点击A后事件切换为B

    点击B后事件切换为A

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script></head><script type="application/javascript">

    $(function () {

        //1:----------------原始方式----------------
        /*
       $("#myDiv").on("mouseover",function () {
           $(this).css("backgroundColor","green");
       });
        $("#myDiv").on("mouseout",function () {
            $(this).css("backgroundColor","blue");
        });
        */
        //2:----------------链式方式----------------

        $("#myDiv").on("mouseover",function () {
            $(this).css("backgroundColor","green");
        }).on("mouseout",function () {
            $(this).css("backgroundColor","blue");
        });

        //3:----------------切换方式----------------
        /*
        $("#myDiv").hover(function () {
            $(this).css("backgroundColor","green");
        },function () {
            $(this).css("backgroundColor","blue");
        });
        */
    });</script><body><div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，
    移出回复红色</div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

运行效果：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


作者：水巷石子

链接：https://blog.csdn.net/qq_37924905/article/details/108659809

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。