jquery event switch

jquery event switch

  • Add events one by one

    Need several events, add several times a day, each time the object calls the function

  • Link method

    Method returns the current object

  • Switching method

    The hover function receives two functions (such as A, B)

    After clicking A, the event switches to B

    After clicking B, the event switches to 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>

running result:

Insert picture description here

Insert picture description here

Insert picture description here

Guess you like

Origin blog.csdn.net/qq_37924905/article/details/108659809