1. 왜 jQuery 인가 ?
페이지에 동적인 기능을 추가하기 위해서는 element , element group 을 선택하여, 선택된 element 를 페이지에서 감추거나 보여주고, 해당 element 에 CSS 클래스를 추가하거나 애니메이션 효과를 주어야 하는 데, 이런 경우 수십줄의 자바스크립트 코드를 직접 작성해야 합니다. 그러나 jQuery 를 이용하면 수십줄의 코드를 한두줄의 코드로 줄일 수 있습니다.
아래의 같이 행간의 색상이 대비되는 얼룩무늬 형태의 테이블을 만들 경우 기존 자바스크립트를 이용하면 열줄이상을 작성하셔야 합니다.
jQuery 라이브러리를 사용시에는 아래와 같이 한줄로 작성이 가능합니다. (여기에 jQuery 의 강력함이 있는 것 같습니다.)
$("table tr:nth-child(even)").addClass("striped");
- FULL SOURCE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>얼룩 무늬</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(even)").addClass("striped");
});
</script>
<style>
body,td {
font-size: 10pt;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
border: 1px outset silver;
background-color: maroon;
color: white;
}
tr {
background-color: white;
margin: 1px;
}
tr.striped {
background-color: coral;
}
td {
padding: 1px 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>생산연도</th>
<th>제조사</th>
<th>모델</th>
</tr>
<tr>
<td>1965</td>
<td>Ford</td>
<td>Mustang</td>
</tr>
<tr>
<td>1970</td>
<td>Toyota</td>
<td>Corolla</td>
</tr>
<tr>
<td>1979</td>
<td>AMC</td>
<td>Jeep CJ-5</td>
</tr>
<tr>
<td>1983</td>
<td>Ford</td>
<td>EXP</td>
</tr>
<tr>
<td>1985</td>
<td>Dodge</td>
<td>Daytona</td>
</tr>
<tr>
<td>1990</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>1995</td>
<td>Ford</td>
<td>Ranger</td>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep Wrangler Unlimited</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Caliber R/T</td>
</tr>
</table>
</body>
</html>
2. unobtrusive 자바스크립트
HTML 문서에서 스타일정보를 분리하는 것과 마찬가지로 문서에서 동작을 분리해서 사용하는 방법을 말합니다.
jQuery 의 창시자는 개발자들이 쉽게 동작을 분리할 수 있도록 라이브러리를 설계했습니다. (존경심이 나오네요 ^^)
사실 unobtrusive 자바스크립트에서는 HTML 페이지의 <body> 태그에 포함된 자바스크립트 표현식이나 구문은 잘못된 것으로 본다고 합니다.
아래는 기존의 방식에서 동작을 분리하는 방법에 대한 간단한 예제입니다.
기존방식 :
<button type="button" onclick="document.getElementById('xyz').style.color='red';">클릭하시오.</button>
jQuery 를 사용해서 변경 :
<button type="button" id="testButton">클릭하시오.</button>
<script type="text/javascript">
window.onload = function() {
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed() {
document.getElementById('xyz').style.color = 'red';
}
</script>
unobtrusive 자바스크립트를 구현할 경우 위의 경우와 같이 코드의 양이 많이지는 불편함이 있습니다.
하지만 jQuery 를 이용할 경우 적은 코드의 양으로도 동일한 효과를 얻을 수 있습니다.
'jquery 시작' 카테고리의 다른 글
| 스크립트 라이브러리의 시대 그리고 jQuery - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
|---|---|
| jQuery : 폼 필터 및 조작 메서드(each 등) - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
| jQuery : 탐색(Traversing) 메서드 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
| jQuery : 조작(Manipulation) 메서드 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
| jQuery 셀렉터 : 필터 사용하기 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
