[jQuery기초] 요소조작_CLASS

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

 

addClass 

선택자에 입력한 클래스를 추가한다. 
공백으로 구분하여 입력 값을 추가하면 여러개의 클래스를 추가할 수 있다. 
함수 형식으로도 사용할 수 있으며 인자 값으로 해당 선택자의 index값을 사용할 수 있다.

// HTML 
<div id="firstBox" class="box"></div> 
<div class="box"></div>

// jQuery
// #firstBox 클래스가 추가
$('#firstBox').addClass('color_box red_box'); 

// .box 클래스 추가된다
$('.box').addClass(function(index){
	return 'box_index' + index;
}); .

// 출력 결과
<div id="firstBox" class="box color_box red_box box_index0"></div>
<div class="box box_index1"></div>

 

removeClass 

선택자에 입력한 클래스를 제거한다. 
공백으로 구분하여 입력 값을 추가하면 여러개의 클래스를 제거할 수 있다. 
함수 형식으로도 사용할 수 있다.

// HTML 
<div id="firstBox" class="box color_box"></div> 
<div class="box"></div> 

// jQuery 
$('#firstBox').removeClass('color_box'); // #firstBox color_box 클래스 제거 
$('.box').last().removeClass(function(){ 
	return $(this).prev().attr('class'); 
}); // p.box 클래스가 제거된다. 

// 출력 결과 
<div id="firstBox" class="box"></div> 
<div></div>

 

hasClass 

선택자가 클래스를 포함하고 있는지를 확인하는 메소드 
여러개의 클래스인 경우 공백으로 구분할 수 있으며 순서는 동일해야한다. 
함수 형식으로도 사용할 수 있으며 인자 값으로 해당 선택자의 index값을 사용할 수 있다.

// HTML 
<div id="box" class="red blue item0"></div> 

// jQuery 

// true 반환 
$('#box').hasClass('red'); 

// true 반환 
$('#box').hasClass('red blue');

// false 반환 
$('#box').hasClass('blue red'); 

// true 반환
$('#box').hasClass(function(index){ 
	return 'item' + index; 
});