首页 > 其他分享> > JQuery事件绑定3事件切换

JQuery事件绑定3事件切换

2022-08-23 09:30:58 作者：互联网

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>

标签：JQuery,function,绑定,点击,toggle,pink,事件,backgroundColor
来源： https://www.cnblogs.com/ssr1/p/16615010.html