티스토리 뷰
jQuery
- 기존에 자바스크립트 언어만으로 구현하기 복잡했던 구문 작성들을 간소화하기 위해 개발된 JavaScript기반 라이브러리다.
- JavaScript 언어로 유용한 함수나 내용들이 이미 만들어져 있는 모음집이라고 생각하면 된다.
- 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발이 가능 하고 적은 양으로 코드를 빠르고 풍부한 기능을 제공합니다.
- DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다.
- AJAX(비동기 통신), 이벤트 처리 등 폭넓게 지원합니다.
- jQuery와 관련된 확장된 플러그인, 오픈 API등을 지원한다(차트, 슬라이드, 애니메이션)
jQuery 연결 방법
1. jQuery 라이브러를 다운로드 받은 후, 워크 스페이스 안에 경로를 지정해서 저장.(오프라인 방식)
- 아래의 링크로 접속
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
- 아래의 그림 속 UnCompressed : 개발자 전용 파일을 클릭해서 다운로드!
- 파일명 jquery.js 변경 후, 이클립스 js 폴더에 붙여넣기.
- <script type="text/javascript" src="../js/jquery.js"></script>와 같이 경로 지정해서 jQuery 사용.
2. CDN(Content Delievery Network)를 통한 연결(온라인 방식)
- 라이브러리를 제공하는 사이트 url을 제시해서 파일 경로로 지정
- url로 사용하기 때문에 url이 먹통이면, 즉 인터넷이 연결되어 있지 않으면 jquery가 반응하지 않는다.
- 인터넷이 연결되어 있는 개발 환경이라면 필자는 CDN을 추천함. 속도가 굉장히 빠름.
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
jQuery 연결 방법
- jquery(document).ready( 함수{ } )
- $(document).ready( 함수{} )
- $(함수 {}) [ 필자가 가장 선호하고 추천드리는 방법]
.ready() Event는 1.8 버전에서는 deprecated 되었으며 3.0에서는 지원하지 않기 때문입니다.잘못된 예
$('span').addClass('italictext'); 와 같이 사용하면 작동하지 않는다.
그 이유는 브라우저내의 HTML 인터프리터에 의해서 DOM 트리가 생성되기 이전에 span 엘리먼트를 검색하려고 시도하였기 때문이다.
jQuery를 HEAD 태그에서 사용하려면 브라우저에 HTML 문서가 로드되어 준비된 상태(ready)가 되었을때 적용되어야한다.