자바스크립트 라이브러리 jQuery 시작하기
jQuery 란 무엇일까?
HTML문서와 밀접한 관계를 가진 jQuery는 쉽게 말해서 자바스크립트(javascript)의 라이브러리로서, 정적인 HTML문서가 자바스크립트를 이용하여 동적으로 바뀔수가 있습니다. 즉, HTML 문서 내에서 화면의 데이터가 변한다던지, 이미지가 변한다던지 할수 있다는 말입니다.
jQuery가 나오기전에는 HTML문서에 자바스크립트를 적용하기 위해서는 많은 분량의 코드를 작성하여야 했습니다. 그러나 jQuery, Prototype 와 같은 자바스크립트 라이브러리가 나오면서, 장시간의 코딩 시간이 상당히 짧아졌습니다.
jQuery 사용하기 위한 준비
jQuery를 사용하기 위해서는 먼저, jQuery 파일을 다운로드 받아야 합니다.
jQuery 최신버전 다운로드 : http://jquery.com/download/
많은 버전이 있는데, 최신 버전을 받으셔도 되며, 이전 버전을 받으셔도 되지만, 버전에 따라서 지원하는 기능과 지원하지 않는 기능이 있으므로 사용하시는 용도에 따라서 다운로드를 받으시면 됩니다.
다운로드를 받지 않고 CDN 링크를 이용하는 방법도 있습니다. CDN을 이용하는 경우에는 반드시 현재 사용하고 있는 PC가 인터넷에 연결이 되어 있어야 정상적으로 동작을 합니다.
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
http://jquery.com/download/#using-jquery-with-a-cdn 참조
와 같이 사용할 수 있으며, jQuery 사이트 이외에도 구글, 마이크로소프트 등의 CDN도 사용이 가능합니다.
http://jquery.com/download/#other-cdns 참조
jQuery 맛보기
jQuery 를 사용해서 간단히 어떻게 사용하는지를 알아보겠습니다.
-- jQuery.start.html --
<!DOCTYPE html>
<html>
<head>
<!-- CDN을 통한 jQuery 라이브러리를 연결 -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- 실제 실행시킬 스크립트 코드 -->
<script>
$(document).ready(function(){ // 문서가 로딩되면 실행
$("div").click(function(){ // div를 클릭
$(this).hide(); // 숨김
});
});
</script>
</head>
<body>
<div>CLICK HERE</div>
</body>
</html>
간략하게 설명을 하면, <body> 부분의 <div> 태그를 클릭하면, 클릭한 <div> 태그를 숨깁니다. 특정 <div>를 설정하지 않아서, 여러개의 div 태그가 있을 경우, 모두 해당이 됩니다.
jQuery는 이렇듯 쉽게 자바스크립트의 사용이 가능하게 합니다. 간단한 showHide 부터, ajax 등도 jQuery를 이용하면 쉽게 구현이 가능합니다.
jQuery 맛보기 파일 :
jQuery.start.html'Web > jQuery' 카테고리의 다른 글
| [jQuery] 간편하게 날짜입력 방법 (0) | 2015.02.07 |
|---|---|
| [jQuery] 시작과 기본 문법 $(function(){ }); (0) | 2015.02.01 |
| $.noConflict() or jQuery.noConflict() (0) | 2010.04.09 |
| jQuery 사용하기 (0) | 2010.04.08 |