jQuery install
jQuery를 사용하기 위해서 먼저 설치를 해야한다. 설치를 하는 방법은 다운로드를 받아서 js파일을 추가하는 방법과 CDN (Content Distribution Network)을 이용하는 방법이 있다. 먼저, 다운로드를 받아 설치하는 방법은 jQuery.com에서 jQuery 라이브러리를 다운로드한 다음에 jQuery를 사용하고자하는 파일 안에 <script>를 사용하여 아래와 같이 JS파일을 추가해주면 된다.
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>
CDN (Content Distribution Network)을 이용하는 방법은 다운로드할 필요없이 URL을 jQuery를 사용하고자하는 파일 안에 <script>를 사용하여 아래와 같이 JS파일을 추가해주면 된다.
google CDN
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
microsoft CDN
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>
jQuery syntax
$(Selector).action();
jQuery의 기본 문법은 위와 같다. '$'표시를 통해 jQuery를 사용 가능하다. element에 직접 접근하기 위해서는 element를 나타내는 selector를 통해 접근이 가능하다.
selector는 여러 종류가 있다. HTML 태그로 직접 접근하는 경우는 $("<HTML 태그>")를 적는다. element의 id로 접근할 경우에는 id앞에 '#'를 붙인다. $("#test")로 사용하면 된다. 클래스 이름으로 접근할 경우에는 $(".test")와 같이 '.'을 클래스의 이름 앞에 붙여준다. 정리하면 아래와 같다.
문법 |
설명 |
예 |
$("*") |
모든 element |
$("*") |
$("<HTML 태그>") |
해당 HTML 태그 element |
$("p") |
$("#<id>") |
해당 id를 가진 element |
$("#test") |
$(".<class>") |
해당 class element |
$(".testClass") |
$(this) |
현재 HTML element |
$(this) |
Selector를 통해 해당 element로 접근했으면 각 element의 event에 action을 정의할 수 있다. $(Selector).event();의 형태로 element의 event로 접근이 가능하다. event에 정의하고 싶은 action은 아래와 같이 정의하면 된다.
$(Selector).event( function() {
// action goes here.
action();
});
일반적으로 사용하는 DOM 이벤트는 아래에 있다. 아래의 이벤트 외에도 많은 이벤트들이 있으므로 자신이 구현을 원하는 적당한 이벤트를 찾아서 사용하면 된다.
Mouse |
Keyboard |
Form |
Document/window |
click |
keypress |
submit |
load |
dbclick |
keydown |
change |
resize |
mouseenter |
keyup |
focus |
scroll |
mouseleave |
|
blur |
unload |
만약에 page가 로드된 직후에 할일을 정의할 때에는 $(document).ready()를 사용한다. 이를 사용하면 page가 다 load되기 전에 먼저 jQuery 코드가 실행되어 아직 만들어지지 않은 element를 조작하는 일을 예방할 수 있다.
$(document).ready( function() {
// action goes here.
action();
});
'WEB > Javascript' 카테고리의 다른 글
| [jQuery] AJAX (Asynchronous Javascript And XML) (0) | 2014.10.29 |
|---|---|
| [jQuery] add/remove HTML element (0) | 2014.10.22 |
| [jQuery] get/set HTML content/attribute (0) | 2014.10.22 |
| [jQuery] callback & chaining (0) | 2014.10.22 |
| [jQuery] Effect (0) | 2014.10.22 |