jQuery 클래스 관련 메서드
jQuery 클래스 관련 메서드에 대해서 알려드리겠습니다.
addClass() 메서드
요소에 class속성을 추가합니다.
| 실행 분류 | 형식 |
|---|---|
| 추가 | $("div").addClass("클래스명"); |
| 콜백 함수 | $("div").addClass(function(index, className){ // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class속성 return class 속성 // 각 div에 속성을 추가합니다. }); .... <div>내용1</div> <div>내용2</div> <div>내용3</div> |
예시
addClass() 메서드를 이용해 간단한 예시로 보여드리겠습니다.
<script>
$(document).ready(function(){
$("#m1 > div").addClass("box");
$("#m2 > div").addClass(function(index){
return "circle" + index;
});
});
</script>
결과
removeClass() 메서드
요소에 removeClass속성을 추가합니다.
| 실행 분류 | 형식 |
|---|---|
| 제거 | $("div").removeClass("클래스명"); |
| 콜백 함수 | $("div").removeClass(function(index, className){ // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class속성 m1, m2, m3 return class 속성 // 각 div에 속성을 제거 합니다. }); .... <div>내용1</div> <div>내용2</div> <div>내용3</div> |
예시
addClass() 메서드를 이용해 간단한 예시로 보여드리겠습니다.
<script>
$(document).ready(function(){
$("#m1 > div").removeClass("con");
$("#m2 > div").removeClass(function(){
return "bg";
});
});
</script>
결과
toggleClass() 메서드
요소에 class 속성이 없으면 addClass()가 적용되고 class 속성이 있으면 removeClass()가 적용됩니다.
| 실행 분류 | 형식 |
|---|---|
| 추가, 제거 | $("div").toggleClass(" 클래스명"); |
예시
toggleClass() 메서드를 이용해 간단한 예시로 보여드리겠습니다.
<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 flase;
});
});
</script>
결과
hasClass() 메서드
if문의 조건식으로 사용됩니다. 선택한 요소 클래스가 있으면 true, 없으면 false를 반환합니다.
<body>
<div id="box" class="m">내용</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
if($("#box").hasClass("m")){
document.write("클래스 있음");
} else {
document.write("클래스 없음");
}
</script>
</body>
결과
내용
클래스 있음
'jQuery' 카테고리의 다른 글
| jQuery - 스타일 메서드 (4) | 2022.09.03 |
|---|---|
| jQuery - 속성 메서드 (4) | 2022.09.03 |
| jQuery - 탐색 선택자 (12) | 2022.08.30 |
| jQuery - 필터 선택자 (8) | 2022.08.30 |
| jQuery - 속성 선택자 (7) | 2022.08.30 |
댓글