제이쿼리 : 클래스 관련 메서드

제이쿼리 : 클래스 관련 메서드

오늘은 JQuery의 주요 메서드들 중, 클래스와 관련된 메서드를 알아보도록 하겠습니다.

---

1. addClass() 메서드

요소에 class 속성을 추가합니다.

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

다음은 addClass() 메서드의 사용 예제입니다.

See the Pen classmethod01 by mj0614k (@mj0614k) on CodePen.

2. removeClass() 메서드

요소에서 class 속성을 제거합니다.

실행 분류	형식
제거	$("div").removeClass("클래스명");
콜백 함수	$("div").removeClass(function(index, className) {     // index는 각 div 요소의 index 0,1,2     // className은 각 div의 class 속성 m1, m2, m3 return class 속성 // 각 div에 class 속성을 제거합니다. }); .... <div class="m1">내용1</div> <div class="m2">내용2</div> <div class="m3">내용3</div>

다음은 removeClass() 메서드의 사용 예제입니다.

See the Pen classmethod02 by mj0614k (@mj0614k) on CodePen.

3. toggleClass() 메서드

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

실행 분류	형식
추가/제거	$("div").toggleClass("클래스명");

다음은 toggleClass() 메서드의 사용 예제입니다.

See the Pen classmethod03 by mj0614k (@mj0614k) on CodePen.

4. hasClass() 메서드

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

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