JQuery事件绑定3事件切换

JQuery事件绑定3事件切换

事件切换： toggle

　　　　　　jq对象，toggle（fn1，fn2）

　　　　　　当单击jq对象对应的组件后，会执行fn1，第二个点击会执行fn2...

　　案例：

　　　　

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        $(function () {
           //获取按钮，调用toggle方法
           $("#btn").toggle(function () {
               //改变div背景色backgroundColor 颜色为 green
               $("#myDiv").css("backgroundColor","green");
           },function () {
               //改变div背景色backgroundColor 颜色为 pink
               $("#myDiv").css("backgroundColor","pink");
           });
        });

    </script>
</head>
<body>

    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
</html>
posted @ 2022-08-23 09:24  一位程序袁  阅读(59)  评论(0)  编辑  收藏  举报