jQuery addClass removeClass 사용법

jQuery의 addClass와 removeClass를 이용하는 방법을 알아보겠습니다.

이미지 출처 : https://jquery.com/

먼저 addClass입니다.

jQuery 사이트를 보면

addClass( 클래스이름 ); OR addClass( function (index) {} ); 형태로 사용 가능하다고 합니다.

1. addClass(클래스이름) 사용 법은

$("셀렉터").addClass("rightHand"); 처럼 사용 하면 

특정 셀렉트 된 요소에 rigghtHand class가 추가 됩니다.

1-2. 동시에 2개 입력추가하려면

$("셀렉터").addClass("rightHand rightFoot"); 형태로 띄어쓰기를 이용하면 됩니다.

2. addClass( function (index) {} );  사용법은

$("셀렉터").addClass(function(index) {

     return "rightHand" + index;

});//여러개의 요소가 셀렉 되었을 때 index 번호를 붙이면서 class 명칭이 생성됩니다(rightHand0, rightHand1 , 2, 3, 4 형태로 됩니다. index는 0부터 생성됩니다.)

두번째 removeClass 입니다.

addClass와 마찬가지로

removeClass( 클래스이름 ); OR removeClass( function () {} ); 형태로 사용 가능합니다.

1. removeClass(클래스이름) 사용 법은

$("셀렉터").removeClass("rightHand"); 처럼 사용 하면 

특정 셀렉트 된 요소에 rigghtHand class가 제거 됩니다.

1-2. 동시에 2개 클래스를 제거 하려면

$("셀렉터").removeClass("rightHand rightFoot"); 형태로 띄어쓰기를 이용하면 됩니다.

2. removeClass( function () {} );  사용법은

$("셀렉터").removeClass(function() {

     return $(this).attr("class");

}); // return 값에 해당되는 class 모두를 1번 혹은 여러개 일 때 1-2처럼 처리 되어 모두 제거 됩니다.

이상 jQuery의 addClass()와 removeClass()에 대해서 알아보았습니다.