<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<body>
        <h4>클래스 추가하기</h4>
        <p id="hi" class="color-blue">안녕하세요</p>
        <button type="button" onclick="addClass()">클래스 추가</button>
        <button type="button" onclick="removeClass()">클래스 삭제</button>
        <button type="button" onclick="hasClass()">클래스 유무 확인</button>
        <button type="button" onclick="toggleClass()">클래스 토글</button>
        <button type="button" onclick="switchClass()">스위치 클래스</button>
        <script src="index.js"></script>
    </body>
<style>
            .color-blue {
                color: blue;
            }
            .color-purple {
                color: purple;
            }
            .font-size {
                font-size: 50px;
            }
            .bg-color {
                background-color: pink;
            }
        </style>
//클래스 조작
function addClass() {
    //함수이름과 메소드 이름을 같게 한 것 뿐이지 다른 것.
    $('#hi').addClass('font-size');
}
function removeClass() {
    $('#hi').removeClass('font-size'); //특정 클래스 삭제
    // $('#hi').removeClass(); //속해있는 모든 클래스를 삭제해버림
}
function hasClass() {
    console.log($('#hi').hasClass('font-size'));
    //true or false 반환
    //해당 클래스가 지정한 요소를 가지고 있는가 boolean 값 으로 반환
}
function toggleClass() {
    $('#hi').toggleClass('bg-color');
    //클래스가 있으면 삭제하고, 없으면 추가
    //여기선 bg-color가 적용되어 있으면 삭제되고 없으면 추가하고..(add & remove를 같이 하는 것)
}
function switchClass() {
    $('#hi').switchClass('color-blue', 'color-purple', 1000);
    //시간에서 1000은 1초라는 의미
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.