매칭되는 요소들에 대해 css Class 를 추가하거나 삭제할 때 사용한다.
1. addClass() 사용문법
.addClass( className )
.addClass( function(index, class) )
2. addClass() 사용예
$('p').addClass('myClass yourClass');
$('p').removeClass('myClass noClass').addClass('yourClass');
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
ul element 안에 li element가 5개 있을 경우 위 예제에서 마지막 li는 ‘item-4′ 라는 className을
가지게 된다. index() 는 0부터 시작이다.
<!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.4.4.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>
</body>
</html>
3. removeClass() 사용문법
.removeClass( [ className ] )
.removeClass( function(index, class) )
4. removeClass() 사용예
$('p').removeClass('myClass yourClass')
$('p').removeClass('myClass noClass').addClass('yourClass');
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
<script>$("p:eq(1)").removeClass();</script>
</body>
</html>