...<div id="pContainer"><p>1번</p><p>2번</p><p>3번</p><p>4번</p><p>5번</p></div>...
위와 같이 레이어 안에 5개의 <p>태그가 존재하고, 각각의 <p>태그 내부에 "문장"이라는 문자열을 추가하고 싶은 경우, 자바스크립트로 이를 구현하기 위해서는 보통 다음과 같은 방법을 사용합니다.
<script type="text/javascript">
var appendText=document.createTextNode("문장"); //"문장" 문자열 생성
var pCont=document.getElementById("pContainer"); //id="pContainer" 레이어 선택
var pList=pCont.getElementsByTagName("p"); //레이어 내부 <p>태그 선택
for(var i=0;i<pList.length;i++)
{
pList[i].appendChild(appendText); //각각의 <p>태그에 "문장" 문자열 추가
}
</script>
그러나 jQuery를 이용하면 다음과 같은 심플한 코드로 모든 것이 해결됩니다.
<script type="text/javascript">
$("#pContainer p").append("문장");
//id="pContainer"인 레이어 내의 모든 <p>태그 선택 및 "문장" 문자열 추가
</script>
위와 같이 단 한 줄의 코드로 원하는 모든 것을 구현 할 수 있었습니다. 이렇게 편리한 jQuery를 이용하기 위해서는 몇 가지 준비 사항이 있습니다. 그 중 첫 번째가 jquery.com에서 라이브러리를 다운로드 받는 것인데, 웹사이트 첫 화면에 아래와 같은 다운로드 버튼을 찾을 수 있습니다.
단순히 라이브러리를 링크해서 사용하려는 경우 PRODUCTION을, 라이브러리 코드를 직접 들여다 볼 필요가 있는 경우 DEVELOPMENT을 선택한 뒤 다운로드를 받습니다.
사실, 굳이 jquery 라이브러리를 다운로드 할 필요는 없습니다. 구글과 jQuery 등에서 CDN을 통해 라이브러리 최신 버전을 링크할 수 있도록 제공하고 있기 때문입니다.
라이브러리 다운로드가 완료되면, 원하는 웹문서에 링크만 시켜주면 바로 사용할 수 있습니다. 링크 방법은 다음과 같습니다.
<head>
<script type="text/javascript" src="라이브러리 상대/절대 주소("./js/jquery.min.js")"></script>
</head>
구글 CDN을 통해 제공되는 라이브러리를 이용하려면 다음과 같은 코드를 사용합니다.
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
</head>
이제 jQuery를 사용할 준비가 모두 완료됐습니다. <script>태그 내에서 자바스크립트와 함께 jQuery를 자유롭게 사용할 수 있으며, CSS와 Javascript, 그리고 DOM에 대해 어느 정도 이해하고 있다면 api.jquery.com/browser를 참고하여 쉽고 빠르게 jQuery 사용법을 익힐 수 있습니다.
이렇게 멋진 라이브러리를 창조하고 지속적으로 발전시켜 나가는 John Resig과 jQuery Project에 개인적으로 고맙다고 하고 싶네요.
'웹' 카테고리의 다른 글
| 자바스크립트 레퍼런스 (0) | 2011.11.03 |
|---|---|
| 소셜 관련 3가지 (0) | 2011.09.29 |
| jQuery개발자가 밝히는 jQuery Mobile의 장점 (0) | 2011.09.27 |
| 차세대 웹표준 'HTML5' (0) | 2011.09.27 |
| [PHP] Mac OS X에 PHP개발 환경 갖추기. (0) | 2011.09.27 |
