Jquery 적용 방법
Jquery는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(js 파일) 형식의 형태로 존재합니다.
따라서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 합니다.
웹 페이지에서 제이쿼리 파일을 로드하는 방법은 2가지로 다음과 같습니다.
1. 제이쿼리 파일을 다운받아 로드하는 방법
2. 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
다운받으셨다면 제이쿼리 파일을 저장하고, 아래 <script>태그를 웹 페이지의 <head>태그 내에 삽입하면 됩니다.
<head>
<script src=/media/jquery-1.12.4.min.js"></script>
</head>
CDN을 이용하여 적용하는 방법
CDN(Content Delivery Network)이란?
- 웹 사이트 사용자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가까운 서버에서 다운받도록 하는 기술입니다.
- 이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 빨라지는 장점을 가지고 있습니다.
이러한 CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있습니다.
아래에 CDN 링크를 첨부하도록 하겠습니다.
1. jQuery.com CDN : <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
2. 구글 CDN : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
3. MS CDN : <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
4. CDNJS CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5. jsDelivr CDN : <script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
아래 소스는 MS CDN을 적용하여 제이쿼리를 로드해보는 예제입니다.
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
'1. 웹개발 > 1_1_2 Jquery' 카테고리의 다른 글
| [Jquery] show(), hide() - 요소 표시하거나 숨기는 방법 (0) | 2020.04.12 |
|---|---|
| [Jquery] event - 이벤트 핸들러 (0) | 2020.04.12 |
| [Jquery] parent(), parents() - 상위 요소 가져오는 방법 (0) | 2020.04.12 |
| [Jquery] clone() - 요소 복사하는 방법 (0) | 2020.04.11 |
| [Jquery] $() - 제이쿼리 문법 (2) | 2020.04.09 |
