jQuery 클래스 관련 메서드

⭐️ jQuery 메서드 ⭐️

---

01. 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>

# 예제 1)

---

[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>

# 예제 2)

---

[3] toggleClass( ) 메서드

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

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

# 예제 3)

---

[4] hasClass( ) 메서드

if문의 조건식으로 사용되며, 선택한 요소 클래스의 존재 여부에 따라 boolean 값을 반환합니다.
  ☛ 선택한 요소 클래스가 있으면 true, 없으면 false를 반환

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