[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - addClass() / hasClass() / removeClass() / toggleClass())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 addClass() / hasClass() / removeClass() / toggleClass() 메소드입니다.

jQuery addClass()

---

.addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다.

문법

---

.addClass( className )

className ( 지정한 클래스 이름을 추가)

데이터타입 : 문자열(String)

1개 또는 2개 이상의 클래스들을 속성에 추가합니다.

.addClass( function )

function 

Type: Function( Integer index, String currentClassName ) => String

함수에서 반환된 클래스를 속성에 추가합니다.

여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. 이 부분은 예제를 가지고 밑에서 설명드리겠습니다. 이 함수 내에서 this는 현재 요소를 나타냅니다.

알고 있어야할 사실은 이 메소드가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다. 

CSS3에서 지정해서 사용하는 클래스를 jQuery로 대체해서 사용하지 말라는 뜻입니다.

예시

---

하나 이상의 클래스를 적용하고 싶다면?

addClass() 내부에 클래스 이름을 지정할 때 스페이스 한칸으로 구분을 해서 작성해주시면 됩니다.

addClass() 메소드의 인자 값으로 콜백함수를 넣을 수 있는데요. 이 예제를 한번 다뤄보도록 하겠습니다.

콜백함수를 사용하면, 지정한 요소의 index 값과 현재 클래스 값을 알 수 있고, 위 예시처럼 해당 인덱스에 클래스를 적용할 수 있습니다.

CSS를 보시면 color_4에만 스타일을 적용해서 li의 마지막 값만 색이 들어간 것을 알 수 있습니다. 다른 li 요소를 보면 color_0부터 color_4까지 클래스가 적용됐음을 확인할 수 있습니다.

한가지 예시를 더 만들어 봤는데요. 만약 li 요소 중에서 index 값이 2라면 green_color라는 클래스를 적용하라는 함수를 적용해 봤습니다.

이렇게 클래스를 필요한 부분에 넣고 싶을 때 유용하게 쓰일 것 같은 메소드입니다.

jQuery hasClass()

---

.hasClass() 메소드는 특정한 클래스가 존재하는지 찾는 메소드입니다.

문법

---

.hasClass( className )

className ( 지정한 클래스 이름을 추가)

데이터타입 : 문자열(String)

클래스 이름으로 검색하는 메소드입니다.

예시

---

button 태그에 btn이라는 클래스가 있다는게 true면 알림창으로 true를 반환하고, 아니면 false를 반환하라는 함수를 구현해봤습니다.

위 예제와 같이 hasClass를 사용할 때 button 태그에 btn 클래스와 btn-default 클래스가 같이 들어가 있지만, 둘 중 하나만 만족해도 true를 반환하는 것을 확인할 수 있습니다.

jQuery removeClass()

---

.removeClass() 메소드는 특정한 클래스를 요소에서 제거할 수 있습니다.

문법

---

.removeClass( className )

className ( 지정한 클래스 이름을 추가)

데이터타입 : 문자열(String)

1개 또는 2개 이상의 클래스들을 속성에서 제거합니다.

.removeClass( function )

function 

Type: Function( Integer index, String currentClassName ) => String

함수에서 반환된 클래스를 속성에서 제거합니다.

여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. addClass() 메소드와 동작 원리는 같습니다.

예시

---

위 예시는 li 태그 중에 인덱스에서 짝수 요소만 removeClass() 메소드를 통해서 test 클래스를 제거해주는 구문입니다. 결과를 보면 인덱스 짝수 번째만 Class가 사라졌음을 확인할 수 있습니다.

jQuery toggleClass()

---

마지막으로 소개해 드릴 메소드는 toggleClass() 입니다. toggle을 봤을 때, 전에 배웠던 여러 메소드들에 toggle이 있었던 것이 기억에 나실겁니다.ㅎ 그 때 toggle은 한 동작을 실행한 뒤 다시 누르면 반대 동작을 실행시켜주는 메소드였는데요. 이번에 소개할 toggleClass() 또한 똑같이 동작합니다. Class를 추가하고, 제거하는 기능을 편리하게 만들어준 메소드가 바로 이 toggleClass() 입니다.

문법

---

.toggleClass( className )

className ( 지정한 클래스 이름을 추가)

데이터타입 : 문자열(String)

1개 또는 2개 이상의 클래스들을 속성에 추가 및 제거합니다.

.toggleClass( className, state )

className ( 지정한 클래스 이름을 추가)

데이터타입 : 문자열(String)

1개 또는 2개 이상의 클래스들을 속성에 추가합니다.

클래스가 추가되거나 삭제될 조건문

.toggleClass( function [, state ] )

function 

Type: Function( Integer index, String currentClassName ) => String

함수에서 반환된 클래스를 속성에 추가 및 제거합니다. 이 함수 내에서 this는 현재 요소를 나타냅니다.

클래스가 추가되거나 삭제될 조건문

예시

---

예시의 결과를 보면 background를 클릭하면 설정해놓은 change_color라는 클래스가 추가됐다가 제거됐다가 toggle하는 것을 알 수 있습니다. 이렇게 특정 요소에 클래스를 쉽게 추가 제거하게 도와주는 메소드입니다.

코딩할 때 오늘 소개해드린 4가지 Class 관련 메소드는 정말 유용하게 사용됩니다. 혹시 추가적인 동작 원리가 궁금하시다면, 댓글로 물어보시면 성심성의껏 답변드리겠습니다 !