jQuery - 클래스 메서드

jQuery 클래스 관련 메서드

클래스를 제어할 수 있는 메서드들을 소개해드리겠습니다.

---

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>

결과

See the Pen jQueryClass by kim-0617 (@kim-0617) on CodePen.

---

removeClass() 메서드

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

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

결과

See the Pen jQueryClass02 by kim-0617 (@kim-0617) on CodePen.

---

반응형

toggleClass() 메서드

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

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

결과

// this는 li a.m이고 next()를 하면 ul, addBack을 하면 this와 ul 모두 선택해서 toggle("on")
// this에 on이 들어가면 주황색 회색 글씨로 토글되고 ul에 on이 들어가면 block과 none으로 토글됩니다.
$(this).next().addBack().toggleClass("on").
// 다른 메뉴들을 초기화 시킵니다 (안보이게)
end().find(".m, ul").removeClass("on").end().parent().siblings().
// 자신의 하위 메뉴들과 하위 서브 메뉴들을 초기화 시킵니다.
find(".m, ul").removeClass("on");

See the Pen jQueryClass03 by kim-0617 (@kim-0617) on CodePen.

---

toggleClass() 메서드

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

if($("#box").hasClass("m")) {
    console.log("클래스 있음"); // 있으면 여기
}
else{
    console.log("클래스 없음"); // 없으면 여기
}