반응형
출처 : jQuery 공식 홈페이지
jQuery ( JavaScript ) 와 CSS 는 뗄 수 없는 관계.
<style> 태그를 통해서 class 정의를 하고,
addClass( "className" ) 과 removeClass( "className" ) 을 통해
정의된 class 를 추가 및 제거할 수 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test{
font-weight: bold;
}
</style>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
$( document ).ready( function(){
$( "a" ).click( function( event ){
event.preventDefault();
$( this ).hide( "slow" );
});
$( "a" ).addClass( "test" );
// $( "a" ).removeClass( "test" );
});
</script>
</body>
</html>
jQuery 를 통해서는 effect 를 주는 것도 쉬운데,
이 예제에서 사용된 것은 천천히 사라지는 hide( "slow" ) effect 이다.
반응형
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [DOM/Tutorial] DOM 의 event flow. ( Capture, Bubble ) (0) | 2013.05.08 |
|---|---|
| [jQuery/Tutorial] Callback 을 잘 사용해보자. (0) | 2013.05.08 |
| [jQuery/Tutorial] window.onload vs. ($document).ready (0) | 2013.05.08 |
| jQuery 를 공부해야 하는 이유 ( 결심동기 ) (2) | 2013.05.07 |
| new html (0) | 2013.01.13 |
댓글