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

남양주개발자

·

2016. 10. 19. 13:35

728x90
반응형


예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 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 관련 메소드는 정말 유용하게 사용됩니다. 혹시 추가적인 동작 원리가 궁금하시다면, 댓글로 물어보시면 성심성의껏 답변드리겠습니다 !

728x90
반응형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

0개의 댓글