jQuery 클래스 메서드

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 제이쿼리 클래스메서드 by kimyihyung (@kimyihyung) on CodePen.

---

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>

예제

See the Pen 제이쿼리 클래스메서드02 by kimyihyung (@kimyihyung) on CodePen.

---

toggleClass() 메서드

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

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

예제 - jQuery

<script>
    $(document).ready(function(){
        $("#m_menu a.m").click(function(){
            $(this).next().addBack().toggleClass("on").end().find(".m, ul").removeClass("on").end().parent().siblings().find(".m, ul").removeClass("on");
            return false;
        });
    });
</script>

서브 메뉴(ul 요소)가 존재하는 a 요소(.m)를 click하면,
$(this).toggleClass("on") // 자신 요소(.m)의 폰트 컬러를 주황색, 회색으로 toggle 시킵니다.
$(this).next().toggleClass("on") // 자신의 서브 메뉴를 show, hide로 toggle 시킵니다.
$(this).next().find(".m, ul").removeClass("on") // 자신의 하위 서브 메뉴들을 초기화 시킵니다.
$(this).next().parent().siblings().find(".m, ul").removeClass("on") // 다른 메뉴들을 초기화 시킵니다.

예제

See the Pen 제이쿼리 클래스메서드03 by kimyihyung (@kimyihyung) on CodePen.

---

hasClass() 메서드

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

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