jquery_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>스타트래커!</title>
<!-- js, css, jquery 지정 -->
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" charset="utf-8" />
<script src="../lib/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<!-- jquery 확인 후 Firebug ( firefox에서 F12 )에서 확인 -->
</head>
<body>
<div id="container">
<div id="header">
<h1>스타트래커!</h1>
</div>
<div id="content">
<h2>
환영합니다!
</h2>
<div id="navigation">
<ul>
<li><a href="#">처음으로</a></li>
<li><a href="#">지금 구매!</a></li>
<li><a href="#">스타트래커!란</a></li>
<li><a href="#">선물 코너</a></li>
</ul>
</div>
<p id="intro">
최고의 유명인을 추적하고 살펴볼 수 있는 <strong>스타트래커!</strong>에 오신 것을 환영합니다. 세계 제 1의 밴드나 음악가 또는 프로듀서가 옆 동네 어느 곳에 있는지 궁금하신가요? 바로 여기서 그 궁금증을 해결할 수 있습니다. 여기서 이번 주에는 아주 특별한 유명인의 정보를 제공할 것입니다. 서두르세요!
</p>
<input type="button" id="hideButton" value="감추기" />
<input type="button" id="showButton" value="보이기" />
<input type="button" id="toggleButton" value="감추기/보이기" />
<div id="celebs">
<h2 class="heading">리스트보기</h2>
<table class="data">
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>직업</th>
<th>대략적인 위치</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>203A</td>
<td>조니 스타더스트</td>
<td>리더</td>
<td>로스엔젤레스</td>
<td>39.95불</td>
</tr>
<tr>
<td>141B</td>
<td>뷰 댄디</td>
<td>가수</td>
<td>뉴욕</td>
<td>39.95불</td>
</tr>
<tr>
<td>2031</td>
<td>모 팻</td>
<td>프로듀서</td>
<td>뉴욕</td>
<td>19.95불</td>
</tr>
<tr>
<td>007F</td>
<td>켈리 켈리</td>
<td>가수</td>
<td>오마하</td>
<td>11.95불</td>
</tr>
<tr>
<td>8A05</td>
<td>다스 페이더</td>
<td>DJ</td>
<td>런던</td>
<td>19.95불</td>
</tr>
<tr>
<td>6636</td>
<td>글렌데트로닉스</td>
<td>키타리스트</td>
<td>런던</td>
<td>39.95불</td>
</tr>
</tbody>
</table>
</div>
<div id="footer">
<p>
© Copyright 2010 유명인추적 프로덕션
</p>
</div>
</div>
</div>
</body>
</html>
jquery
//테이블 마우스오버
$(function() {
$('#celebs tr:even').addClass('table_striping');
$('#celebs tr').hover(function() {
$(this).addClass('td_mouseover');
}, function() {
$(this).removeClass('td_mouseover');
});
//버튼
$('#toggleButton').click(function() {
if ($('#intro').is(':visible')) {
$('#intro').slideUp('slow');
} else {
$('#intro').slideDown('slow');
}
});
});
'it > jQuery' 카테고리의 다른 글
| 새창링크 (0) | 2014.08.21 |
|---|---|
| 뭔가 되긴 되는거 같은데 (0) | 2014.08.21 |
| <li>글자추가 삭제 (0) | 2014.08.21 |
| jquery연습 글자수제한 마우스오버 그림바꾸기 (0) | 2014.08.21 |
| http://hyeonstorage.tistory.com/ (0) | 2014.08.21 |
