( 공부복습 ) 클래스 관련 메서드
▶ addClass( ) 메서드
요소에 class 속성을 추가
| 실행 분류 | 형식 |
| 추가 | $("div").addClass("클래스명"); |
| 콜백 함수 | $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0, 1, 2 // className은 각 div의 class 속성 return class 속성 //각 div에 cpass 속성을 추가 }); ..... <div>내용1</div> <div>내용2</div> <div>내용3</div> |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 관련</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
#m2 {
text-align: center;
}
.box {
border-bottom: 2px solid #ccc;
text-align: center;
padding: 20px;
margin-bottom: 10px;
}
.circle0,
.circle1,
.circle2 {
width: 200px;
height: 200px;
border-radius: 100px;
border: 4px solid #ff6600;
line-height: 200px;
display: inline-block;
}
</style>
<script>
$(document).ready(function () {
$("#m1 > div").addClass("box");
$("#m2 > div").addClass(function (index) {
return "circle" + index;
})
});
</script>
</head>
<body>
<div id="m1">
<div>jQuery</div>
</div>
<div id="m2">
<div>html</div>
<div>css</div>
<div>javascript</div>
</div>
</body>
</html>
▶ 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> |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메서드</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#m1 > div").removeClass("con");
$("#m2 > div").removeClass(function () {
return "bg";
});
})
</script>
</head>
<body>
<div id="m1">
<div class="con">콘텐츠</div>
</div>
<div id="m2">
<div class="c1 bg">내용1</div>
<div class="c2 bg">내용2</div>
<div class="c3 bg">내용3</div>
</div>
</body>
</html>
▶ toggleClass( ) 메서드
요소에 class 속성이 없으면 assClass( )가 적용되고 class 속성이 있으면 removeClass( )가 작용
| 실행분류 | 형식 |
| 추가, 제거 | $("div").toggleClass("클래스명"); |
toggleClass( ) 메서드와 removeClass( ) 메소드를 이용하여 어코디언 메뉴를 실습해 보기!
| <script> $(document).ready(function( ) { $("#m_menu a.m").click(function() { $(this).next( ).addBack( ).togglClss("on").end( ).find(".m, ul").removeClass("on").end( ).parent( ).sblings( ).find( ".m, ul" ).removeClass("on"); return false; }); }); </script> |
| 서브 메뉴(ul 요소)가 존재하는 a 요소(.m)를 click 하면, $(this).toggleClass("on") // 자신 요소(.m)의 폰트 컬러를 주황색, 회색으로 toggle $(this).next( ).toggleClass("on") // 자신의 서브 메뉴를 show, hide로 toggle $(this).next( ).find(".m, ul).removeClass("on") // 자신의 하위 메뉴들과 하위 서브 메뉴들을 초기화! $(this).next( ).parent( ).parent( ).siblings( ).find(".m, ul").removeClass("on") // 다른 메뉴들을 초기화 |
▶ hasClass( ) 메서드
if 문의 조건식으로 사용 선택한 요소 클래스가 있으면 true, 없으면 flse를 반환
| if($("#box").hasClass("m")){ consonle.log("클래스 있음"); // 클래스 있음 }else { console.log("클래스 없음"); } ... <div id="#box" class="m">내용</div> |