앞서 소개에서 제이쿼리(jQuery)는 자바스크립트로 만든 라이브러리라고 이야기 했어.
즉 수많은 기능을 하는 함수들을 하나의 js 파일에 모아 둔 것이야.
그러므로 제이쿼리 함수를 사용하기 위해서는 우선 이 라이브러리 파일을 연결하는 것이 첫번째 시작이야.
여러분의 html 파일의 <head>~</head> 사이에 제이쿼리 js 파일을 지정해 주면 돼.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제이쿼리학습</title>
<style>
...
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
...
응? 그런데 제이쿼리 주소가 이상하지?
또 제이쿼리 라이브러리 이름도 jquery.js 인줄 알았더니
jquery.min.js 이네?
눈치 챈 분들은 개발자의 자질이 있는 거야.
제이쿼리 공식사이트에 가면 원본 jquery.js 파일도 있어. 이것을 내 서버에 다운 받아서 src="jquery.js" 와 같이 위치를 지정해 줘도 돼.
그런데 제이쿼리 같이 유명한 라이브러리들은 전세계의 유명 네트워크 서버에 다 등록되어 있어.
그냥 위와 같이 어느 서버에 있든지 주소만 입력해서 끌어다 쓰면 돼.
그리고 실제로 대부분은 위와 같은 방법으로 사용해.
이렇게 제이쿼리 라이브러리를 등록해 둔 사이트는 위 CDNjs 이외에도 아래 사이트들도 많이 이용해.
둘째, 제이쿼리의 원본 라이브러리 파일은
jquery.js 야.
그리고 이 원본 파일을 압축한 파일이
jquery.min.js 야 (mini 의 뜻이겠지?)
압축버전은 원본 버전에서 빈줄,엔터기호, 공백, 주석과 같은 것들을 다 최적화하고 붙여서 파일 사이즈를 최대한 작게 만든 버전이야.
이 글을 쓸 때의 최신 버전인 3.7.0 기준으로 jqeury.js 의 크기는 280kb 이고, 압축된 jquery.min.js 의 크기는 85kb 이니 압축버전이 거의 1/3 크기로 작아. 그러나 작동은 똑같아.
파일 크기가 작으면 브라우저에서 불러 오는 속도가 더 빠르기 때문에 이렇게 크기를 줄인 버전이 훨씬 많이 사용돼.
여러분이 jquery 파일을 수정하거나 분석하고 싶으면 원본인 jquery.js를 받아서 수정하면 돼.
그렇지만 그런 경우는 사실 거의 없어. 그냥 가져다 쓰는 경우가 99.9999% 일거야.
그래서 거의 대부분 홈페이지에서 사용하는 제이쿼리는 jquery.min.js 야.
그리고 이것 보다 더 줄인 버전도 있어.
jquery.slim.min.js 인데 이것은 제이쿼리 기능중에서 ajax 와 에니메이션 관련 함수를 뺀 파일이야.
이러한 기능은 전혀 안쓰는 홈페이지들도 많거든.
하나 재미있는 것은 제이쿼리는 버전이 올라갈 때 마다 사이즈가 줄어..ㅎ
대부분의 프로그램들은 버전이 올라갈 때 마다 새 기능을 추가하느라 사이즈가 커지잖아?
제이쿼리는 반대로 버전이 올라갈 때 마다 새 인터넷 환경에서는 필요 없어진 기능들을 빼면서 버전업을 해 가기 때문에 오히려 줄어..
아마 4.0 이 나오면 틀림없이 더 줄어 들거야.
■ 제이쿼리 기본 문법
제이쿼리의 기본 사용법은 아래와 같아.
$(선택자).동작함수( );
여기서
'선택자(Selector)' 는 조작하려는 대상 html의 요소야.
즉 <p>, <div>, <img>, <li>, <button>.. 같이 html 문서의 body를 이루고 있는 태그들이야.
이렇게
$(선택자) 로 원하는 요소를 선택한 다음
.동작함수( ) 를 사용해서 해당 요소를 조작하는 거야.
또 class 와 id 이름도 선택자로 사용할 수 있어.
설명이 좀 어렵지?
예제를 보면 쉽게 이해할 수 있어. 아래 제이쿼리 문장을 한 번 봐.
- $("p").hide( ) → 문서에 있는 모든 <p> 태그의 내용을 감춰라.
- $(".test").hide( ) → 문서에 있는 요소중 class="test" 로 지정한 모든 요소들을 감춰라.
- $("#subMenu").hide( ) → 문서의 요소중 id="subMenu" 인 요소를 감춰라.
예제를 보니 바로 이해가 되지?
감추기를 하는 hide( ) 함수가 있는걸 보면, 보이게 하는 show( ) 함수도 있겠지? 맞아.
이런 식으로 $( ) 로 특정 요소를 선택하고 뒤의 동작함수로 어떤 작동을 하는 것이 바로 제이쿼리의 기본이야.
우리가 알아야 할 것은 hide( ), show( ) 외에 또 어떤 함수들을 사용할 수 있는 아는 것이야.
■ ready 이벤트
가장 먼저 ready 라는 동작함수(이벤트)를 알아 볼께.
이것은 브라우저가 html 문서를 읽고 가장 먼저 실행할 자바스크립트나 제이쿼리가 있을 때 사용 해.
왜 이것이 필요하냐 하면 자바스크립트나 제이쿼리가 문서 위쪽에 있는 경우 제대로 작동하지 않은 경우가 있어.
예를들어 <body> 태그 앞에 $("#subMenu").hide( ) 명령을 했다고 생각해 봐.
브라우저는 <body> 아래쪽에 있는 id="#subMenu" 를 아직 읽지도 않은 상태이기 때문에 이 요소를 선택할 수가 없어.
그래서 문서를 다 읽은 다음에 실행하라는 함수가 바로 ready 야.
기본 사용법은 아래와 같아.
$(document).ready(function(){
// 실행할 자바스크립트나 제이쿼리 문장들...
});
또 아래와 같이 줄여서 쓰는 방법도 있어.
$(function(){
// 실행할 자바스크립트나 제이쿼리 문장들...
});
다음 장 부터는 자바스크립트 강좌의 뒤 부분에서 만들어 보았던 감추기,보이기,슬라이드 같은 실전 예제들을 제이쿼리 로는 어떻게 구현하는지 해 보는 방식으로 설명할 거야.
또 여기서도 자세한 설명은 하지 않고 "이런게 있다.." 는 정도 까지 만 강의할거야.
제이쿼리는 인터넷에 학습서나 강의가 너무 많아서 내가 여기서 아무리 친절하게 설명해도 구글신의 눈에 띠지도 않을것 같아..ㅎ
학습 마지막에 정리가 잘 된 사이트를 추천하는 것으로 대신할께.