jQuery学习笔记07-操作类属性

本是古典何须时尚 2024-04-17 16:44 84阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery操作类</title>
        <style>
            /**/
            .class1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .class2{
                border: 10px solid black;
            }
        </style>
        <script src="jQuery/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                /*
                * addClass:用于给指定标签添加类
                * removeClass：用于删除指定标签的类
                * toggleClass：用于切换指定标签的类，有就删除，没有就添加
                * */
                //获取所有的button标签
                var btns = document.getElementsByTagName("button");
                //给第一个button添加点击事件
                btns[0].onclick = function (ev) {
                    //找到div标签，添加class属性class1和class2
                    $("div").addClass("class1 class2")
                };
                //给第二个button添加点击事件
                btns[1].onclick = function (ev) {
                    //找到div标签，删除class属性class1和class2
                    $("div").removeClass("class1 class2")
                };
                //给第二个button添加点击事件
                btns[2].onclick = function (ev) {
                    //找到div标签，切换class属性class1和class2，有就删除，没有就添加
                    $("div").toggleClass("class1 class2")
                };
            })
        </script>
    </head>
    <body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
    </body>
    </html>