为什么实现不了功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 5px solid red;
        }

        .bg1 {
            background-color: green;
        }

        .border {
            border: 5px solid yellow;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <button class="btn">切换背景和边框颜色</button>
    <script>
        //补充代码

        $(function () {
            var box = $("box");
            var btn = document.getElementsByTagName("button")[0];

            btn.onclick = function () {
                box.toggleClass("bg1 border");
            }
        })
</script>
</body>


</html>

谁还不是个小宝贝了哼 2018-03-25

源自：jQuery DOM操作 3-4 编程练习

收起

3回答

丶四夕回答被采纳获得+3积分 2018-03-26 16:17:06

onclick这样的事件只存在于js中，jquery中没有，但是可以用click（）这样的方法，里面可以直接写执行的语句，也可以写入一个函数，想要了解更多可以去百度下jQuery中绑定事件的方法，或者等学到后面会讲的。

收起回答

谁还不是个小宝贝了哼提问者 #1

非常感谢！

2018-03-27 16:19:47

慕斯卡5217687 2018-03-25 12:37:59

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 5px solid red;
        }
 
        .bg1 {
            background-color: green;
        }
 
        .border {
            border: 5px solid yellow;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <button class="btn">切换背景和边框颜色</button>
    <script>
        //补充代码
 
        $(function () {
            $('.btn').click(function(){
                $('.box').toggleClass('bg1 border');
            })
        })
</script>
</body>
 
 
</html>

收起回答

提问者谁还不是个小宝贝了哼 2018-03-25 02:45:55

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 5px solid red;
        }

        .bg1 {
            background-color: green;
            width: 200px;
            height: 200px;
        }

        .border {
            border: 5px solid yellow;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <button class="btn">切换背景和边框颜色</button>
    <script>
        //补充代码

        $(function () {
            var box = $("div");
            var btn = $(".btn");

            btn.click ( function () {
                if (box.hasClass("box")) {
                    box.removeClass("box");
                    box.addClass("bg1 border");
                } else {
                    box.addClass("box");
                    box.removeClass("bg1 border");
                }
            }
        )})
</script>
</body>


</html>

现在改动以后好了

收起回答

chenqianguan #1

<body> <div class="box"></div> <button class="btn">切换背景和边框颜色</button> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $("button").click(function(){ $("div").toggleClass("border bg1"); }); </script> 可以尝试下，用toggleClass实现，

2018-03-28 17:41:07