JQuery 정리: JQuery UI, JQuery Mobile, QUnit, Sizzle 등

JQuery(제이쿼리)란 클라이언트 측에서 작동하는 자바스크립트의 한 라이브러리이다. 2006년 뉴욕 Barcamp에서 John Resig이 공식적으로 소개한 뒤, 오늘날까지 가장 인기있는 자바스크립트 라이브러리 중에 하나로, JQuery Foundation에서 지원하고있다.

JQuery는 MIT 라이센스를 가지기 때문에 누구나 무료로 사용가능하다. JQuery는 많은 컨트리뷰터에 의해 개발되고 있으며, GitHub 레파지토리에서 누구나 참여가 가능하다.

JQuery는 스크립트를 (직관적으로) 단순화하며, DOM(문서 객체 모델)탐색 및 조작, 이벤트 제어, 애니메이션(CSS등) 제어, Ajax 개발을 용이하게 만들어 준다. 또한, 다른 개발자들이 JQuery를 위한 플러그인을 개발할 수 있도록 지원한다.

라이브러리 설치 방법

JQuery는 하나의 파일로 존재하기 때문에, 이 파일을 자신의 웹 페이지에 포함시키면 된다.

외부 스크립트 파일 추가 방법

<script type="text/javascript" src="path/jQuery.js"></script>

또는, 구글 라이브러리 API 사용

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

JQuery의 기본 사용법

DOM 탐색 및 조작

$( "button.continue" ).html( "Next Step..." );

이벤트 제어

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
    hiddenBox.show();
});

Ajax 개발

$.ajax({
    url: "/api/getWeather",
    data: {
        zipcode: 97201
    },
    success: function( data ) {
        $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
    }
});

JQuery Foundation에서 지원하는 자바스크립트 라이브러리는 아래와 같다.

JQuery Core
JQuery UI : JQuery를 활용한 유저 인터페이스 모음 (Interactions, effects, widgets, and themes)
JQuery Mobile : HTML5기반의 모바일 기기를 위한 유저 인터페이스 모음
QUnit : 자바스크립트 유닛 테스트용 프레임워크
Sizzle : 순수 자바스크립트 CSS Selector 엔진