jQuery 알아보기 : 클래스 관련 메서드

jQuery 클래스 관련 메서드 알아보기

제이쿼리의 메서드 중에서 클래스(Class)와 관련된 메서드 들을 알아봅니다.
클래스 관련 메서드에는 addClass(), removeClass(), toggleClass(), hasClass() 메서드가 있습니다.

> addClass() 메서드

addClass() 메서드는 요소에 class 속성을 추가합니다.

실행 분류	형식	예시	예제
추가	$("요소").addClass("클래스명");	$("div").addClass("text");	보러 가기
콜백 함수	$("요소").addClass(function(index, className) {     return "class 속성";     ⇒ 각 '요소'에 class 속성을 추가합니다. }); ⇒ index는 각 '요소'의 index 0, 1, 2 ⇒ className은 각 '요소'의 class 속성	$("div").addClass(function(index) { return "text"; }); //… <div>내용1</div> <div>내용2</div> <div>내용3</div>

> removeClass() 메서드

removeClass() 메서드는 요소에 class 속성을 제거합니다.

실행 분류	형식	예제
추가	$("요소").removeClass("클래스명");	보러 가기
콜백 함수	$("요소").removeClass(function(index, className) {     return "class 속성";     ⇒ 각 '요소'에 class 속성을 제거합니다. }); ⇒ index는 각 '요소'의 index 0, 1, 2 ⇒ className은 각 '요소'의 class 속성

> toggleClass() 메서드

toggleClass() 메서드는 요소에 class 속성이 없으면 addClass()가 적용되고, class 속성이 있으면 removeClass()가 적용됩니다.

실행 분류	형식	예시
추가, 제거	$("요소").toggleClass("클래스명");	$("div").toggleClass("active");

> hasClass() 메서드

hasClass() 메서드는 if문의 조건식으로 사용됩니다. 선택한 요소에 클래스가 있으면 true, 없으면 false를 반환합니다.

if($("#box").hasClass("m")){
console.log("클래스 있음"); //클래스 있음
} else {
console.log("클래스 없음");
}
.
.
.
<div id="box" class="m">내용</div>