728x90
반응형
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> |
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
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> |
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
toggleClass () 메서드
요소에 class 속성이 없으면 addClass()가 적용되고 class속성이 있으면 removeClass()가 적용됩니다.
| 실행 분류 | 형식 |
|---|---|
| 추가, 제거 | &("div").toggleClass("클래스명"); |
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<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>
</head>
</html>
$(this).toggleClass("on") // 자신 요소 (.m)의 폰트 컬러를 주황색, 회색으로 toggle 시킵니다.
$(this).next().toggleClass("on") // 자신의 서브 메뉴를 show, hide로 toggle 시킵니다.
$(this).next().find(".m, ul").removeClass("on") // 자신의 하위 서브 메뉴들을 초기화 시킵니다.
$(this).next()).parent()).siblings().find(".m, ul").removeClass("on") // 다른 메뉴들을 초기화 시킵니다.
$(this).next().toggleClass("on") // 자신의 서브 메뉴를 show, hide로 toggle 시킵니다.
$(this).next().find(".m, ul").removeClass("on") // 자신의 하위 서브 메뉴들을 초기화 시킵니다.
$(this).next()).parent()).siblings().find(".m, ul").removeClass("on") // 다른 메뉴들을 초기화 시킵니다.
hasClass () 메서드
if문의 조건식으로 사용됩니다. 선택한 요소는 클래스가 있으며 true, 없으면 false를 변환합니다.
if($("#box").hasClass("m")){
console.log("클래스 있음"); // 클래스 있음
}else {
console.iog("클래스 없음");
}
...
<div id="#box" class="m">내용</div>
See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.
728x90
댓글