[jQuery] jquery 클래스 추가(addClass), class 추가 삭제(removeClass) 및 확인(hasClass)

class 추가나 삭제는 css에 선언된 class를 이용하여 active 효과를 줄 때 보통 많이 사용합니다.

<div class="test">테스트입니다.</div>

<button class="btn">변경</button>

- css 선언

.test.active {

color:red;

}

위의 선언은 test라는 class를 가진 DOM에 active class가 함께 있으면 color를 red로 변경하라는 선언입니다.

jQuery를 이용하여 class를 추가해 변경되는 모습을 확인해보겠습니다.

- jQuery

$(document).ready(function() {

   $(".btn").off("click").on("click", function() {

// test class를 포함하는 DOM 객체가 active class를 포함하면 true 아니면 false를 반환

       if ($(".test").hasClass("active")) { 

// active class 제거

            $(".test").removeClass("active");

       }

       else {

// active class 추가

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

       }

   });

});

다음 시간에 배울 버튼 클릭 이벤트도 함꼐 포함되어 있지만 이번에는 class가 변경됨에 따라 색상이 변경되는 부분을 확인하시면 될듯합니다.

jQuery hasClass() 함수를 통해 active 를 포함하고 있는지 확인하고

포함하고 있지 않으면 addClass() 함수를 통해 추가하고

포함하고 있으면 removeClass() 함수를 통해 삭제합니다.

예제 : 이동하기