eterno

[jQuery] 제이쿼리 라이브러리 연동하기(다운로드 , CDN) 본문

JavaScript/공부

[jQuery] 제이쿼리 라이브러리 연동하기(다운로드 , CDN)

영원한별똥별 2023. 3. 11. 15:35
728x90
반응형

 

제이쿼리 라이브러리는 다운로드 방식과 CDN방식이 있다.

 

CDN방식이란 ?

Content Delivery Network의 약자로 인터넷에서 제공하는 링크를 삽입하여 연결하는 방식이다.

CDN방식은 접속이 빠르지만 네트워크가 연결되어있어야 작동된다.

 

제이쿼리 라이브러리 다운로드

 

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

Download the compressed, production jQuery 3.6.3 : 압축이 된 파일
Download the uncompressed, development jQuery 3.6.3 : 압축이 안된 파일

 

jquery의 가장 최신버전은 3.6.3이지만 IE8과 호환성을 위해 1.12.4버전으로 다운받기

 → 이전 버전은 CDNJS 에서 다운 가능하다.

 

jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

JavaScript library for DOM operations - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

~~jquery.min.js : 압축된 파일

~~jquery.js : 압축된 파일(압축되어있어 로딩속도는 빠르지만 들여쓰기, 줄 바꿈 등 소스가 압축되어있다)

 

파일을 .js파일로 저장해서 HTML 파일이 있는 위치에 js폴더 생성후 저장하기

html파일에서 script로 제이쿼리 라이브러리 파일 불러와서 사용하기

더보기

<script src="jstest/js/jquery.js"></script>

 

CDN 방식으로 연결하기

1. CDNJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

2. 구글

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

3. 마이크로소프트 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

 

4. jsDelivr 

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>

5. jQuery

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

 

<head> 태그 안에 위의 5가지 중 한가지를 넣어 사용할 수도 있다.

 

 

 

 

 

참고)https://jquery.com/download/

        Doit! 자바스크립트 + 제이쿼리입문

728x90
반응형

'JavaScript > 공부' 카테고리의 다른 글

[JavaScript] 배열 객체 메서드(reverse(), sort(), splice(), pop(), shift(), push(), unshift(), join(), slice(), concat(), toString())  (2) 2023.03.05
[JavaScript] 배열 객체 생성  (1) 2023.03.05
'JavaScript/공부' Related Articles more