[제이쿼리] 클래스 관련 메서드

클래스 관련 메서드

메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다.
제이쿼리에 사용되는 메서드에 대해 알아보겠습니다.

1. 클래스 관련 메서드
2. 속성 관련 메서드
3. 스타일 관련 메서드

---

■ 메서드의 기본 형식

1. $("선택자").메서드명();

⇒매개변수가 없는 유형

2. $("선택자").메서드명(값);

⇒매개변수가 한개인 유형

3. $("선택자").메서드명(function(){});

⇒매개변수가 함수인 유형

4. $("선택자").메서드명(값1,값2,...);

⇒매개변수가 여러개인 유형

5. $('선택자').메서드명({
    옵션: 값,
    옵션: 값
});

⇒매개변수가 객체방식인 유형

한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다.
어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형을 가질 수 있습니다.

01_ addClass() 메서드

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

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

예시

02_ removeClass() 메서드

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

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

예시

03_ toggleClass() 메서드

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

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

예시

서브 메뉴(ul 요소)가 존재하는 a 요소(.m)을 클릭하면,
$(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") // 다른 메뉴들을 초기화 시킵니다.

04_ hasClass() 메서드

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

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