본문 바로가기

프론트엔드/JQUERY

[jQuery] 제이쿼리 라이브러리 연동하기

 

" 자바스크립트 선행지식이 필요합니다, 사용 툴 visual studio code"

" 참고 도서 두잇 자바스크립트 + 제이쿼리 입문"

 

 

INDEX


  • 다운로드(Download) 방식
  • 네트워크 전송(CDN, Content Delivery Network)

 

 

다운로드(Donwload) 방식


- 제이쿼리 라이브러리 제공 사이트에서 파일을 직접 다운로드하여 script 태그로 불러오는 방식

- 네트워크 상태와 무관하게 언제든 개발할 수 있다.

 

 

제이쿼리 다운로드
제이쿼리 다운로드 사이트

 

 

- https://jquery.com/download/ 에 접속하여 제이쿼리 라이브러리를 다운받는다. 3.6.0이 가장 최신 버전

- jquery.min.js는 압축된 파일로 용량이 작아 로딩이 빠르다.

- jquery.js는 줄 바꿈, 주석 등이 포함되어 있는 비압축 파일이고 min.js보다는 용량이 크지만 제이쿼리 자체를 개발할 때는 유용하다고 한다.

 

 

제이쿼리 파일 다른 이름으로 저장
제이쿼리 파일 다른 이름으로 저장

 

 

- min.js, .js 중 상황에 맞게 선택 후 위 사진처럼 제이쿼리 파일을 작업할 파일에 저장한다.(파일명은 되도록 그대로 사용)

 

 

다운받은 제이쿼리 파일 연결
다운받은 제이쿼리 파일 연결

 

- 파일 저장 후 head 또는 body 영역에 script 태그를 사용하여 js 파일을 불러온다.

 

 

* 최신 버전에서 삭제된 이전 버전 메서드를 사용해야 할 경우

 

 

제이쿼리 Migrate 1.4.1
제이쿼리 migrate 버전

 

jquery migrate연동

 

 

- Migrate 1.4.1을 js 파일과 같은 방식으로 다운로드한다.

- 파일 저장 후 script태그로 불러온다.

 

 

네트워크 전송(CDN, Content Delivery Network)


- 제이쿼리 라이브러리를 url의 형태로 불러와 사용하는 방식이다.

- 테스트하는 용도로 할 때 주로 사용한다.

 

 

제이쿼리 cdn 사이트
제이쿼리 cdn 사이트

 

 

- https://cdnjs.com/libraries/jquery 에 접속하여 원하는 버전의 url형태를 찾아 복사한다(사진 속 파란색 원 부분을 클릭하면 복사가 된다.) 

- 브라우저 간 호환성을 고려해야 할 경우에는 version에서 원하는 버전을 찾아 선택한다

( If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.

jquery 사이트에서는 이전 버전 지원 시 1.12를 사용하라고 나와있다. )

 

 

복사한 url 스크립트 태그에 기입
복사한 url 스크립트 태그에 기입

 

 

- 복사한 url을 head 또는 body태그 안에 script태그의 속성 src에 기입해준다.