jQuery / class 제어하기

제이쿼리에는 어느정도 익숙하지만 그래도 기록으로 남기려고 한다.

주의 할점은 셀렉터에서 대상이 id인지 class인지 '#' '.'  으로 선언해줘야한다. 

하지만 뒤에 메서드에는 '.' 을 안붙혀줘도 된다.

 

1. 클래스 추가

$('선택자').addClass('class1'); // 1개 추가 
$('선택자').addClass('class1 class2'); // 여러개 추가

2. 클래스 제거

$('#선택자').removeClass('class1'); // 1개 제거
$('#선택자').removeClass('class1 class2'); // 여러개 제거

3. 클래스 교체 : 체이닝으로도 할 수 있다.

$('선택자').switchClass('oldClass', 'newClass');
$('선택자').removeClass('oldClass').add('newClass')

4.클래스 새로 지정 : attr() 매서드로 첫번째 인자로는 속성, 두번째인자로는 값이 들어간다.

$('#element').attr('class', 'newClass');

5.클래스 존재여부 확인 (반환값 : boolean)

$('선택자').hasClass('class1'); 
$('선택자').hasClass('class1 class2'); // 여러개: 한 개라도 일치하지 않으면 false 반환

6. 토글 

$('선택자').toggleClass('class1');
$('선택자').toggleClass('class1', true);
$('선택자').toggleClass('class1', false);