제이쿼리(jQuery)란?
- 오픈 소스 기반의 자바스크립트 라이브러리
- 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 함
- 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용 가능
- 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나
제이쿼리의 장점
- 현재 많이 사용되고 있는 자바스크립트 라이브러리
- 프로토타입(Prototype)
- 도조(Dojo)
- GWT(Google Web Toolkit)
- MochiKit
- 제이쿼리가 특히 많이 사용되는 이유
1. 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원
2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용
3. 애니메이션 효과나 대화형 처리를 간단하게 적용
4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현 가능
5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재
6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용 가능
제이쿼리 적용
- 제이쿼리는 자바스크립트 라이브러리, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재
- 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load) 해야 함
웹 페이지에 제이쿼리 파일을 로드하는 방법
1. 제이쿼리 파일을 다운받아 로드하는 방법
2. CDN(Content Delivery Network)을 이용하여 로드하는 방법
제이쿼리 파일을 다운받아 로드하는 방법
- 최신 버전의 제이쿼리 파일은 다음 공식 사이트에서 다운
jQuery.com : http://jquery.com/download =>
(다운받은 제이쿼리 파일을 서버에 저장하고, 다음 <script>태그를 웹 페이지의 <head>태그 내에 삽입)
|
1
2
3
4
|
문법
<head>
<script src="/파일경로/제이쿼리파일명.js"></script>
</head>
|
cs |
CDN을 이용하여 로드하는 방법
- CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술
(특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점)
(CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용 가능)
현재 이용할 수 있는 제이쿼리 버전 1의 CDN
(어떤 CDN을 이용하더라도 같은 동작함)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
1. jQuery.com CDN :
https://code.jquery.com/jquery-1.12.4.min.js
2. 구글 CDN :
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
3. MS CDN :
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js
4. CDNJS CDN :
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
5. jsDelivr CDN :
https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js
|
cs |
|
1
2
3
4
|
예제
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
|
cs |
'[jQuery]' 카테고리의 다른 글
| [jQuery] 요소의 추가 (21) | 2023.09.24 |
|---|---|
| [jQuery] 선택 요소에 접근 (0) | 2023.09.21 |
| [jQuery] 제이쿼리 선택자 (0) | 2023.09.19 |
| [jQuery] CSS 선택자 (0) | 2023.09.18 |
| [jQuery] 제이쿼리(jQuery) 문법 (0) | 2023.09.16 |