요기보드3   필수기초 선택과목 요기보드 그누보드 로그인

제이쿼리(jQuery)


addClass, removeClass, toggleClass

자바스크립트 강좌의 [15장. 감추기,보이기, 토글]의 토글 공부할 때 classList 를 잠깐 공부한 적이 있어.
classList.add( ), classList.remove( ), classList.toggle( )   기억나?
선택한 요소에 미리 선언했던 스타일명을 넣고, 빼고, 토글하는 기능이었어.
제이쿼리에서는 이것을 어떻게 처리하는지 한 번 해보자구.


	$("선택자").addClass("클래스명") → 클래스 추가
	$("선택자").removeClass("클래스명") → 클래스 제거
	$("선택자").toggleClass("클래스명") → 클래스 토글
	$("선택자").hasClass("클래스명") → 클래스 검사

특별한 설명 없어도 제목만 보면 무슨 역할인지 알겠지?
마지막 hasClass( ) 는 지정한 "클래스명"이 있는지 검사할 필요가 있을 때 사용해.
예를들어 "어떤 요소에 big 이라는 클래스가 이미 적용되어 있으면 어떻게 해라~" 같은 조건이 필요할 때는 if 문을 이용해서 이 함수를 사용하면 되겠지?

아래 데모페이지를 실행해 보면 바로 이해할 것 같아서 이번 강좌는 이걸로 끝낼께...
코드는 데모페이지에 가서 Ctrl-U 로 확인해 봐.
http://yogibbs.kr/jsDemo/addClass-jquery.html

위 데모 페이지는 앞서 공부했던 css( ) 메소드를 사용해도 충분히 가능해.
그렇지만 css( )를 사용하려면 요소의 크기,색상,위치등 여러개의 속성을 바꿔야 할 때 스타일 속성 하나하나씩 다 변경해야 하잖아.
그런데 이 addClass, removeClass 를 사용하면 웹페이지의 스타일파일에 미리 선언해 둔 클래스 이름만 가지고 여러개의 속성을 한꺼 번에 바꿀 수 있어.
어떤 메소드를 사용하는 것이 더 적절한지는 바로 여러분이 판단해 사용하면 되겠지?

목차제 목조회
62
67
62
40
41
34
42
36
33