** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
1. 제이쿼리(jQuery)란?
1) 제이쿼리 소개
- HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다.
- 2006년 John Resig이 뉴욕시 바캠프(Barcamp NYC)에서 공식적으로 소개하였습니다.
- MIT 라이선스를 가진 자유 오픈 소프트웨어입니다.
- 최근 리액트나 Vue.js같은 자바스크립트 프레임워크가 나오면서 많이 위축되고는 있고, 트렌드에 많이 밀리고는 있지만 그래도 실무에서는 현저히 홈페이지를 제작하는데 많이 사용합니다.
- 그리고 jQuery 차기버전(4.x)가 나올 예정이며, 그동안 단점으로 보았던 것들을(무거움 등) 해결할 것으로 보입니다.
2) 제이쿼리 VS 자바스크립트
- jQuery의 목적은 웹사이트에서 javascript를 훨씬 쉽게 사용할 수 있도록 하는 것입니다.
- 자바스크립트가 코드가 길다면 제이쿼리를 짧게 작성해도 처리할 수 있게 메서드로 래핑합니다.
2. 제이쿼리(jQuery) 라이브러리 다운로드
- 기본적으로 웹페이지가 라이브러리 없이 인식하는 웹프론트엔드 언어는 세가지입니다.
- HTML, CSS, Javascript입니다.
- 그 외의 자바스크립트 프레임워크들을 사용하려면 반드시 라이브러리를 붙여야만 사용가능합니다.
- 웹페이지에 jQuery를 추가하는 방법은 크게 2가지가 있습니다.
- 제이쿼리라이브러리를 다운로드해서 html에 붙여서 사용합니다.
- google과 같은 CDN의 jQuery를 가져와서 사용합니다.
- 다음은 제이쿼리 사이트주소입니다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
1) 제이쿼리 숫자 버전
- 스마트폰도 아이폰7, 아이폰8, 이런식으로 기계사양이 발전하듯이, 프로그래밍언어도 발전하기 때문에 버전을 붙입니다.
| 버전 종류 | 설명 |
| jQuery 1.x Version | 구형 브라우저를 지원하고 가장 안정적인 버전, 아직 실무에서 많이 사용 |
| jQuery 2.x Version | 인터넷 익스플로러 6~8버전을 지원하지 않음, 그 외는 1.x버전과 같음 |
| jQuery 3.x Version | 가장 최신버전이고, Ajax를 지원. 사용이 추천되지만 외부 플러그인을 많이 사용시 1.x버전을 사용하는 것이 안정적 |
2) 압축관련 버전
- 압축관련 버전은 용량에 관계가 있다.
| 버전 종류 | 설명 |
| Production Version | 압축되었으므로 웹사이트 제작용 버전 ex) jquery-3.6.0.min.js |
| Development Version | 압축되지 않았으므로 개발자가 수정해서 사용할 수 있는 버전 ex) jquery-3.6.0.js |
## Production Version
- 위의 그림처럼 엔터나 띄어쓰기 없이 쭉 써서 용량을 압축해 놓았습니다.
- 하지만 엔터와 띄어쓰기가 없다면 수정이 힘들겠죠?
## Development Version
- 위의 그림처럼 같은 코드지만 보기 좋게 엔터처리나 띄어쓰기가 되어 있어 수정하기 편합니다.
- 하지만 코드 줄수가 길어지므로 용량은 커질수 밖에 없습니다.
3. 제이쿼리(jQuery) 라이브러리 연결방식
1) 다운로드 방식
- 파일을 직접 다운로드 받아서 <script>태그에 연결해서 사용하는 방식입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 플러그인붙이기</title>
<script src="제이쿼리플러그인파일경로"></script>
</head>
<body>
</body>
</html>- 현재 제이쿼리 사이트에서는 3.x버전만 제공중이라 다운받을 수 있도록 아래 파일을 처리해놓겠습니다.
## 1.x 개발자 마지막 버전
## 1.x 생산성 마지막 버전
## 2.x 개발자 마지막 버전
## 2.x 생산성 마지막 버전
## 3.x 개발자 마지막 버전
## 3.x 생산성 마지막 버전
2) CDN 방식
- 외부 서버(google 등)에 있는 파일을 끌어다 쓰는 방식입니다.
## google 제이쿼리 CDN 제공 주소
https://developers.google.com/speed/libraries#jquery
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
## 구글 CDN 경로
3.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
'웹언어 > jQuery' 카테고리의 다른 글
| [jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드 (0) | 2021.06.29 |
|---|---|
| [jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디 (0) | 2021.06.26 |
| [jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디 (0) | 2021.06.24 |
| [jQuery강좌] 3강 제이쿼리 문서객체 선택자 - 오쌤의 니가스터디 (0) | 2021.06.22 |
| [jQuery강좌] 2강 제이쿼리 준비구문 - 오쌤의 니가스터디 (0) | 2021.06.22 |
