jquery事件切换

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>

运行效果:

在这里插入图片描述

在这里插入图片描述

扫描二维码关注公众号,回复: 11811662 查看本文章

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37924905/article/details/108659809