jQuery 는 빠르고 정확한 JavaScript Library 입니다. John Resig이라는 사람이 2006년에 만들었다고 하네요. Write less, do more. 이게 jQuery가 탄생한 이유입니다. 적은코드로 많은 일을 하는 것.
jQuery 는 HTML 문서 traversing, event handling, animating, and Ajax interactions 을 단순화 시켜줍니다.
jQuery의 특징에는 다음과 같은 것들이 있습니다.
DOM 조작: Sizzle이라는 selector엔진을 이용해서 DOM 요소를 선택하거나, 검색하거나, 요소의 내용을 수정하는 작업을 용이하게 해줍니다.
Event handling: HTML코드를 사용하지 않고 이벤트 처리를 할 수 있게 해줍니다.
AJAX 지원
애니메이션 : 상당히 많은 애니메이션 효과를 제공합니다.
가볍다 : 19KB 정도 밖에 안되는 매우 가벼운 라이브러리 입니다. ( Minified and gzipped ).
다양한 브라우저 지원 : IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
최신 기술 지원 : CSS3 selectors 와 basic XPath 문법을 지원합니다.
jQuery 설치하는 것은 어렵지 않습니다.
최신버전 다운로드하기 : download jQuery
다운로드한 최신버전의 jquery-x.y.z.min.js 파일을 프로젝트 경로 내에 넣어주세요, e.g. /jquery.
파일명에 min.js로 끝나는 버전은 최소화된 버전으로 불필요한 빈 줄이나 단어를 제외한 버전이라고 합니다.
jquery 라이브러리 include하는 방법은 다음과 같습니다.
|
As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
To do this, we register a ready event for the document as follows:
|
To call upon any jQuery library function, use HTML script tags as shown below:
|
custom.js 파일에 내가 정의한 기능을 따로 정의합니다.
|
다른 페이지에서 custom.js 파일내에 정의된 기능을 실행하고자 할때에는 이 파일을 추가하면 됩니다
|
jQuery 를 다른 라이브러리와 함께 사용하게 되면 충돌가능성이 있을 수 있습니다. $ 기호를 다른 라이브러리에서도 사용할 수 있기 때문입니다.
$.noConflict() 메소드를 실행하면 $ 변수를 먼저 import한 라이브러리에 우선권을 넘기게 됩니다. jQuery에서 $는 단지 jQuery의 alias일 뿐이므로 $를 쓰지 않아도 전혀 문제될 것이 없습니다. 사용법을 한번 보시죠.
|
이 방법은 특히 .ready() 메소드의 기능과 쓰일때 강력하다고 하네요. jQuery의 $를 사용할 수 있게 해주기 때문이죠.
사용법을 한번 보실까요?
|
Reference : http://www.tutorialspoint.com/jquery/jquery-overview.htm
AJAX란? - 이벤트 종류 (0) | 2016.06.12 |
---|---|
AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
AJAX란? - 서버로 요청하기 (1) | 2016.06.12 |
Ajax 란? - Ajax 시작하기 (1) | 2016.06.12 |
[jQuery] 2. jQuery Basics ( 기본 ) (0) | 2015.08.06 |