4가지! 클래스 메서드?

클래스 관련 메서드

이번 시간에는 클래스와 관련된 메세드에 대해 알아보겠스빈다!

---

addClass() 메서드

요소에 class 속성을 추가시켜주는 메서드 입니다~~!

실행 분류	형식
추가	대 소문자 구분 없이 정규표현식과 문자열을 비교합니다.
추가	$("").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>

예시

---

removeClass() 메서드

요소에 class 속성을 제거해줘요~~!

실행 분류	형식
제거	$("div").removeClass("클래스명");
콜백 함수	$("").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>

예시

---

toggleClass() 메서드

요소에 class속성이 없다면 addClass()가 적용되며,
요소에 class속성이 있다면 removeClass()가 적용됩니다~~!

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

예시

---

hasClass() 메서드

if문의 조건식으로도 사용되고,
선택한 요소는 클래스가 있으면 true로, 없으면 false로 반환합니다!

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