티스토리 뷰
매칭되는 요소들에 대해 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>'jQuery' 카테고리의 다른 글
| Attribute Contains Word Selector [name~="value"] (0) | 2010.12.30 |
|---|---|
| .innerHeight() .innerWidth() (0) | 2010.12.28 |
| .fadeIn() .fadeOut() (0) | 2010.12.28 |
| .show() .hide() (0) | 2010.12.28 |
| .trigger() (0) | 2010.12.27 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크