본문 바로가기

강좌/jQuery

jQuery 소개 및 간단한 예제로 시작하기

작성자 : Deok

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 는 요소가 서서히 나타나게 합니다.


간단히 작동 예제를 알아 봤고 후에 기회가 된다면 좀더 좋은 예제로 찾아 오겠습니다.

'강좌 > jQuery' 카테고리의 다른 글

jQuery 소개 및 간단한 예제로 시작하기  (0) 2019.01.07