728x90
🧷 jQuery : 클래스 관련 메서드
➰ 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> |
➿ addClass() 메서드 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>addClass() 메서드</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
* {
margin: 0;
padding: 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>내용1</div> <div>내용2</div> <div>내용3</div> |
➿ removeClass() 메서드 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>removeClass() 메서드</title>
<script src="jquery-3.3.1.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 속성이 없으면 addClass()가 적용되고 class 속성이 있으면 removeClass()를 적용됩니다.
| 실행 분류 | 형식 |
|---|---|
| 추가,제거 | $("div").toggleClass("클래스명"); |
➿ toggleClass() 메서드 사용 예시
<!DOCTYPE html>
<html lang="ko">
...
<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 false;
});
});
</script>
...
</html>
➰ hasClass() 메서드
if문의 조건식으로 사용됩니다.
선택한 요소 클래스가 있으면 true, 없으면 false를 반환합니다.
if($("#box").hasClass("m")) {
console.log("클래스 있음"); // 클래스 있음
} else {
console.log("클래스 없음");
}
...
<div id="#box" class="m">내용</div>
'jQuery' 카테고리의 다른 글
| 스타일 관련 메서드 (3) | 2022.09.04 |
|---|---|
| 속성 관련 메서드 (3) | 2022.09.04 |
| jQuery : 탐색 선택자 (12) | 2022.08.31 |
| jQuery : 필터 선택자 (10) | 2022.08.31 |
| jQuery : 속성 선택자 (16) | 2022.08.30 |
댓글