제이쿼리란?
제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어이다.
제이쿼리는 자바스크립트에서 사용할 때 불편했던 몇가지 점들을 간편하게 사용할 수 있도록 개선했다.
호환성 문제 해결
자바스크립트의 문서 객체 모델(DOM)과 이벤트 객체(Event Object)는 호환성(크로스 브라우징)이 떨어진다는
단점이 있다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자(nextSibling)는 IE8 이하의 브라우저에서 문서 객체를
선택했을 때와 다른 브라우저에서 문서 객체를 선택햇을때의 결과가 다르다.
하지만 이런 문서객체 선택자의 호환성 문제가 제이쿼리에서는 모두 해결되었다.
쉽고 편리한 애니메이션 효과 기능 구현
제이쿼리는 애니메이션과 다양한 효과(Effect)를 지원하는 메소드를 제공하기 때문에 개발 시간을 많이 단축할 수
있다.
제이쿼리 라이브러리 연동
제이쿼리 연동방법에는 다운로드 방식과 네트워크 전송방식 두가지가 있다.
다운로드 방식은 파일을 직접 내려받아 HTML에 불러오는 방식이다.
네트워크 전송방식은 온라인에서 제공하는 파일을 네트워크를 통해 HTML에 불러오는 방식이다.
다운로드 방식은 네트워크 상태아 상관없이 언제든 개발할 수 있다는 장점이 있지만 컴퓨터에 파일을 내려받아야
한다. 간단히 테스트 할 목적이라면 네트워크 전송방식이 더 편하다.
다운로드 방식으로 연동
https://cdnjs.com/libraries/jquery
jquery - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
jquery - JavaScript library for DOM operations - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
cdnjs.com
위 사이트에서 jquery를 검색하고 라이브러리를 선택한다.
그런 다음 버전 선택 상자에서 1.12.4를 선택.
만약 IE8이하 브라우저까지 호환성을 염두에 둔다면 1.12.X이하 버전의 라이브러리 파일을 사용해야 한다.
선택한 라이브러리 파일 목록에 [jquery.js], [jquery.min.js]가 있다. 해당 목록에 마우스 포인터를 올리면 [copy]버튼이
나타나고 버튼을 누르면 해당하는 라이브러리 파일의 URL주소가 복사된다.
| 종류 | 설명 |
| jquery.js | 소스에 들여쓰기, 줄 바꿈, 주석까지 정리된 비압축 파일로, 제이쿼리 자체를 개발할 때 유용하다. |
| jquery.min.js | 소스에 들여쓰기, 줄 바꿈, 줙이 무시된 압축파일로, 소스가 압축되어 있어 제이쿼리 자체를 개발하는 용도로는 적합하지 않다. 하지만 용량이 작아 로딩속도가 빠르다. |
복사한 URL로 이동한다. 그다음 Ctrl + S를 눌러 페이지를 저장한다.
이때 js파일은 HTML파일이 있는 폴더에 'js'라는 이름으로 폴더를 만들어 저장하면 된다.
HTML의<head> 영역에 <script>태그를 삽입하여 제이쿼리 라이브러리 파일을 불러온다.
<head>
<meta charset="UTF-8">
<title>제이쿼리 연동</title>
<script src="js/jquery.js"></script>
</head>제이쿼리는 최신버전으로 자주 업그레이드 되는데 이전 버전에서 자주 사용했던 기능(메소드)이 삭제되어 사용할 수
없는 경우가 종종있다. 이런경우 이전버전의 기능을 사용하려면 'Migrate plugin'을 설치하면 된다.
네트워크 방식으로 연동
cdnjs사이트에 들어가서 제이쿼리(1.12.4) 라이브러리 파일의 URL을 복사한다.
<script> 태그 src속성에 복사한 URL을 붙여 넣는다.
<head>
<meta charset="UTF-8">
<title>제이쿼리 연동</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Front > JQuery' 카테고리의 다른 글
| JQuery(이벤트 등록 메소드) (0) | 2020.05.22 |
|---|---|
| JQuery(객체조작) (0) | 2020.05.20 |
| JQuery(속성 탐색 선택자) (0) | 2020.05.20 |
| JQuery(위치탐색선택자) (0) | 2020.05.20 |
| jquery(선택자) (0) | 2020.05.20 |