JS——jquery添加删除样式类

版权声明:进击的葱 https://blog.csdn.net/qlwangcong518/article/details/86518262

描述:

jquery添加删除样式类

实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div0
        {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div1
        {
            background-color: black;
            color: white;
        }
        .div2
        {
            background-color: deepskyblue;
            color: red;
        }
    </style>
    <script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
//        $("div").addClass("div0");
//添加多个class
        $("div").addClass("div0");

//        $("div").removeClass("div0");
//        $("div").removeClass("div0 div1");


//        $("div").toggleClass("div2");
//        $("div").toggleClass("div2 div0");
var arr=["div1","div2"];
        $("div").hover(function () {
/*
*       第一个参数是切换类,这个必须写在交互的事件中
*       才会有切换效果
*       第二个参数是布尔值,如果是true就是不切换回去,如果是false就是不切换
*       如果默认不填,表示来回切换
*
*
* */
            $(this).toggleClass("div2")
//            $("div").addClass("div2");

            /*
            *  可以在toggleClass()里面增加函数,目的是切换多个元素使用
            *  第一个参数是索引值
            *  第二个参数是当前切换样式Class
            *  return 返回当前需要切换到的样式Class
            *
            * */


          /*  $("div").toggleClass(function (a,b,c) {
//                console.log(a,b,c)
                return arr[a%2];
            })*/
        })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qlwangcong518/article/details/86518262