JQuery를 하기 전!! 알아야 할 부분이 있다
JQuery는 언어가 아니고!! JS를 편하게 쓸 수 있는 라이브러리이다!! 절대절대 착각하면 안된다!!
JQuery는 호로록 사라져가고 있는 추세임을 꼭 알고 가야한다 !! (이녀석을 의지하고 있으면 안된다는 것!)
** jQuery를 사용하려면 import 먼저 해야겠죠?
import 방식은 2가지! 😁
#1 - CDN 사용하기(추천)
① 'jqury CDN'을 검색해서 들어간다.
(아래의 링크를 타고 들어가도 무관 👌)
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
code.jquery.com
② 사이트에 들어가면 아래와 같은 창이 나온다.
jQuery 3.x(최신버전)의 minified를 클릭한다.
(참고) minified와 uncompressed가 있는데 왜 꼭 minified인가요?하는 생각이 들 수 있다.
minified는 파일을 최소화 시키기 위해 불필요한 공백과 줄바꿈을 모두 없앤 파일이고,
uncompressed는 코맨트, 보기 편한 공백 및 줄바꿈이 그대로 있는 오리지널 버전이기 때문에 minified보다 용량이 크다는 점이 차이가 있다. 그래서 minified를 추천하고, 많은 사람들이 용량을 줄이기 위해 minified를 사용한다!
** 소스를 자세히 알고 싶다면 uncompressed 추천!
③ code integration을 복사해서 jQuery를 적용시킬 html <head>에 붙여넣기를 한다
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
- #1 import 완료
#2 - 파일을 다운로드하여 사용하기
① 'jquery'를 검색하여 'download' 탭에 들어간다.
(아래의 링크를 타고 들어가도 무관 👌)
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.0' 클릭하여 ctrl+S 후, 파일로 저장하기
(참고-cdn과 동일) compressed와 uncompressed가 있는데 왜 꼭 compressed인가요?하는 생각이 들 수 있다.
compressed는 파일을 최소화 시키기 위해 불필요한 공백과 줄바꿈을 모두 없앤 파일이고,
uncompressed는 코맨트, 보기 편한 공백 및 줄바꿈이 그대로 있는 오리지널 버전이기 때문에 compressed보다 용량이 크다는 점이 차이가 있다. 그래서 compressed를 추천하고, 많은 사람들이 용량을 줄이기 위해 compressed를 사용한다!
③ jQuery를 적용시킬 html <head>에 script src를 사용하여 적용시킨다.
<script src="경로/jquery-3.5.1.min.js"></script>- #2 import 적용완료
jQuery import를 했다! jQuery가 지금 내 집 신발장까지 들어와있는 상황이다
근데 jQuery도 다른 친구들처럼 내가 '집 안까지 들어오세요'라고 명령을 하지 않으면 절대 안들어오는 친구이기 때문에
이 친구가 집안까지 들어올 수 있도록 jQuery를 적용 시켜야한다
** jQuery를 적용 시키는 방법도 2가지가 있다
#1
<script>
$(document).ready(function(){
// js/jquery 코드 작성
})
</script>
#2(추천)
<script>
$(function(){
// js/jquery 코드 작성
})
</script>- jQuery 구문에는 항상 $가 붙어있다 $이 붙으면 무조건 jQuery인 것!!($ = jQuery의 추상화)
이제 jQuery가 방까지 들어왔다 이 친구를 이용해 나의 집을 예쁘게 꾸며볼 수 있는 시간은 다음 파트에서 해보도록 하겠다
'웹 > (LIBRARY) JQUERY' 카테고리의 다른 글
| [코딩 공부_98] jQuery로 img 무한 복제 시키기 (0) | 2021.06.17 |
|---|---|
| [코딩 공부_97] bx slider 사용하기 (0) | 2021.06.16 |
| [코딩 공부_96] slick 슬라이더 사용하기 (0) | 2021.06.16 |
| [코딩 공부_95] jQuery로 modal, tab 만들기 (0) | 2021.06.13 |
| [코딩 공부_94] jQuery 기본 함수 (0) | 2021.06.12 |
댓글