[jQuery]addClass, removeClass

*addClass

=> 선택자에 클래스를 추가할 때 사용
=> 클래스 선택자 .은 사용하지 않음
=> 우선순위 확인!!

*removeClass

=> 선택자에 클래스를 삭제할 때 사용

body

    <div class="box"></div>
    <div class="box_1 active"></div>

style

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box, .box_1{
            width: 300px;
            height: 300px;
            background-color: orchid;
        }

        .box_1{
            background-color: teal;
        }

        .active{
            border-radius: 50%;
        }

script

        $(document).ready(function(){

            $('.box').addClass("active");
            $('.box_1').removeClass("active");

        });

addClass와 removeClass를 이용한 문제 + 삭제 버튼으로 초기화

body

    <div class="wrap">
        <div class="box"></div>
        <button> 삭제 </but>
    </div>

style

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .warp{
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .box{
            width: 300px;
            height: 300px;
            background-color: sienna;
            margin: 200px auto;
            transition: 0.8s;
            cursor: pointer;
        }

        button{
            width: 200px;
            height: 30px;
            border-radius: 10px;
            cursor: pointer;
        }

        .active{
            transform: rotate(360deg);
            background-color: yellowgreen;
        }

=> 여기서 .active를 아래 script에서 addClass와 removeClass로 추가 및 삭제를 해줄 것

script

        $(document).ready(function(){
            
            var num = 0;

            $('.box').click(function(){

                $(this).addClass("active");

                if(num == 0){
                    $(this).addClass("active");
                    num++;
                } else if(num == 1){
                    $(this).removeClass("active");
                    num--;
                }

            });

            $('button').click(function(){
                $('.box').removeClass("active");
            });