jQuery 는 강력한 javascript 의 라이브러리입니다. HTML 요소 검색, 조작을 할 수 있으며, 이벤트, 에니메이션 Ajax를 쉽게 사용할 수 있도록 해주는 특징들이 있습니다. 가장 큰 특징은 역시 매우 배우기 쉽고 가볍게 쓰기 좋습니다.
우선 jQuery 를 사용하기 위해서는 jQuery 를 페이지에 셋팅해야 합니다.
다운로드 받으셔서 지접 호스팅한 후 사용하실수도 있고 Google CDN과 같은 CDN 을 이용하는 방법이 있습니다. CDN 을 이용하는 방법은 Google CDN 을 이용하는 것을 추천 드리며 아래에서 원하시는 버전을 확인 하실 수 있을 것 입니다.
Google CDN - 링크
글을 작성 중인 현재 1.x 중 최신 버전은 1.12.4 입니다. 아래의 script 부분을 <head> </head> 사이 혹은 문서의 하단에 넣어 주도록 합니다.
우선 예제로 간단하게 클릭 할 경우 상자를 지우거나 표시하는 예제를 보겠습니다.
JsFiddle 주소 : http://jsfiddle.net/Deoker/oyr6czhh/2/
$(document).ready(function(){
$("#exampleToggle").click(function(){
var state = $("#exampleBox").css("display");
if(state == "block"){
$("#exampleBox").fadeOut(200);
}else{
$("#exampleBox").fadeIn(200);
}
});
});
간단하게 소스코드를 설명하면
$(document).ready(function(){ });
는 문서가 완성 되었을 경우 이벤트를 발생시켜 달라는 함수입니다.
$("#exampleToggle").click(function(){});
은 exampleToggle 라는 id 를 가진 요소를 클릭 할 경우 이벤트를 발생 시켜 달라는 함수 입니다.
var state = $("#exampleBox").css("display");
는 #exampleBox 라는 요소의 css 상태를 가져오는 역할을 합니다.
if(state == "block"){
$("#exampleBox").fadeOut(200);
}else{
$("#exampleBox").fadeIn(200);
}
코드는 확인한 요소의 상태에 따라 fadeOut 혹은 fadeIn 과 같은 이벤트를 발생하도록 하는 역할을 합니다.
fadeOut 는 요소를 서서히 사라지게 하며 fadeIn 는 요소가 서서히 나타나게 합니다.
간단히 작동 예제를 알아 봤고 후에 기회가 된다면 좀더 좋은 예제로 찾아 오겠습니다.