jQuery - Class메서드

class관련 메서드

요소에 class 속성을 추가합니다.

jQuery class형식은 다음과 같습니다.

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

JQuery를 사용한 예제 입니다.

$(document).ready(function () {
    $("#m1 > div").addClass("box");
    $("#m2 > div").addClass(function(index){
        return "circle" + index;
    });
});

결과

---

removeclass()관련 메서드

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

jQuery class형식은 다음과 같습니다.

실행 분류	형식
추가	$("div").removeClass(클래스명);
콜백 함수	$("div").removeClass(function)index, className){ //index는 각 div 요소의 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>

JQuery를 사용한 예제 입니다.

$(document).ready(function () {
    $("#m1 > div").removeClass("con");
    $("#m2 > div").removeClass(function(){
        return "bg";
    });
});

결과

---

toggleclass()관련 메서드

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

jQuery class형식은 다음과 같습니다.

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

JQuery를 사용한 예제 입니다.

$(document).ready(function () {
   $("#m1 > div").removeClass("con");
   $("#m2 > div").removeClass(function(){
       return "bg";
   });
});

결과

hasclass()관련 메서드

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

JQuery를 사용한 예제 입니다.

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