[JQUERY] 클래스 메서드

Jquery : 클래스 관련 메서드

이번 시간에는 자바스크립트의 jquery 클래스 관련 메서드에 대해 알아보겠습니다.😆

---

#1. 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>

✏️ addClass() 메서드 예제

---

#2. jQuery : 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() 메서드 예제

---

#3. jQuery : toggleClass() 메서드

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

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

✏️ removeClass() 메서드 예제

$(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;
    });
});

---

#4. jQuery : hasClass() 메서드

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

✏️ removeClass() 메서드 예제

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