[jQuery] jQuery 이해1 - 시작

jQuery는 수많은 자바스크립트 라이브러리중에 현재 가장 많이 사용하는 프레임웍이다.

jQuery홈페이지에서 말하고 있듯이 빠르고 간결하며 기존 자바스크립트와는 달리 작성하는 방식을 달리 할수 있도록 설계되었다(메소드체이닝). 당연히 프론트엔드개발을 하고있는 개발자들은 반드시 이해를 하고 있어야 하는 라이브러리이다.

jQuery 삽입

자바스크립트 라이브러리들의 사용방법은 간단하다. 문서에 스크립트를 삽입해주면 되는데 jQuery도 동일하다. 다운로드 페이지에서 원하는 버전을 내려받아서 사용하던가 CDN이 적용된 주소를 그대로 사용해도 무방하다

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

jQuery 사용

jQuery를 삽입하면 jQuery() 함수가 만들어 지는데 축약형태로 $ 로 사용이 가능하다. jQuery홈페이지에서 브라우저에서 콘솔을 열어서 아래코드를 넣어보자 ( 크롬에서 개발자도구를 사용하여 해보기를 권장한다)

$('body').fadeOut().delay(1000).fadeIn();

사용방법이 특이한가? 메소드를 연결해서 (method chaining) 계속 호출하고 있다. jQuery의 많은 메소드들이 jQuery객체를 그대로 리턴하기에 이러한 문법으로 작성이 가능하다.

$ 충돌방지

기존에 다른프레임웍을 사용한다는 이유등로 이미 $를 선언해서 사용하고 있다면 jQuery별칭인 $ 를 다른이름으로 변경 할수 있습니다

var j = jQuery.noConflict();
j('body').fadeOut().delay(1000).fadeIn();

jQuery 장점

* 오픈소스이다

* 브라우저마다 javascript,DOM,이벤트 구현등이 처리가 다른데 이런 크로스브라우징 문제를 쉽게 해결 가능

* 수많은 플러그인이 존재하여 개발시간을 단축 시킬수 있다

 

[출처] http://uixkr.github.io/archives/577/