.addClass() 함수는 특정한 클래스를 요소에 추가할 수 있습니다.
원문 링크 
http://api.jquery.com/addClass/
- .addClass( className )
- className 특정 조건에 추가할 하나 이상의 클래스 명
- .addClass( function(index, class) )
- function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;)
가장 중요한 것은 이 함수가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다.
하나 이상의 클래스를 추가하려면 띄어쓰기를 사용하면 됩니다. 아래 예시를 보시죠.
이 함수는 .removeClass()와 자주 같이 사용됩니다. 만약 클래스의 바꿔치기를 원하시면 이 두가지 함수를 아래와 같이 사용하시면 됩니다.
설명드리자면 myClass 와 noClass를 없앤 후에 yourClass 를 추가하는 구문이 되겠습니다.
jQuery 1.4 버젼 이후로 .addClass 는 클래스명을 반환해 주는 내부함수를 사용할 수 있게 되었습니다.
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});만일 5개의 li 가 존재한다면 이 함수는 "item-4"라는 클래스명을 반환해 주게 됩니다.
예 제
선택자와 일치하는 요소에 "selected"라는 클래스를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>$("p:last").addClass("selected");</script>
</body>
</html>
미리보기
마지막 p 태그에 "selected" 클래스가 추가되어 텍스트의 색이 변한 걸 볼 수 있습니다.
예 제
선택자와 일치하는 요소에 "selected highlight"라는 2개의 클래스를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>
</body>
</html>
미리보기
마지막 p 태그에 "selected" 와 "highlight" 클래스 2가지가 추가되어 텍스트 색과 바탕색의 색이 변한 걸 볼 수 있습니다.
예 제
함수를 사용하여 텍스트를 바꾸고 클래스를 추가 업데이트 합니다.(그런데, 소스에 에러가 있다고 나오네요.)
<!DOCTYPE html>
<html>
<head>
<style>
div { background: white }
.red { background: red }
.red.green { background: green }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the 'active' class. It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$('div').addClass(function(i,clas){
if(i===1) {
$('p').text('There is one green div');
clas = 'green';
}
return clas;
}); //블루블루님이 댓글로 해결해 주셨습니다. ^^
$('div').addClass(function(i,class) {
if ( i === 1 ) {
$('p').text('There is one green div');
class += ' green';
}
return class;
});
</script>
</body>
</html>
미리보기
소스의 의도는 아마 2번째 div 의 바탕색이 녹색으로 되고, p 태그안의 텍스트를 변경하려는 것 같습니다. 그러나 에러 때문에 작동하지 않더군요. 해결해 주실 분 있나요?
업데이트
블루블루님께서 위 에러를 잡아주셨습니다. 소스에 남겨두었습니다. 참고하셔요. 블루블루님 감사합니다.
아~ 등호 3개 (===)가 구문 중에 있습니다. 이 연산자의 이름은 동치라고 하구요. 변수의 타입과 값이 모두 일치할 경우에만 True 입니다.
addClass 왠지 많이 사용할 것 같지 않으신가요?
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |
|---|---|
| jquery API 정복 - innerHTML 과 같은 표현, html() (10) | 2011.03.10 |
| jQuery API 정복 - 클래스가 있나 찾기, hasClass() (5) | 2011.03.03 |
| jQuery API 정복 - attr(), 속성을 제어하기 (2) | 2011.02.25 |
| jQuery API 정복 - 눈에 보이는 요소 찾기 : visible (5) | 2011.02.24 |
| jQuery API 정복 - text 박스 찾기 : text (3) | 2011.02.24 |
| jQuery API 정복 - submit 버튼 찾기 : submit (4) | 2011.02.22 |
| jQuery API 정복 - select 박스에서 선택된 것 찾기 : selected (4) | 2011.02.22 |