JQuery
JQuery에 대해 알아보는 시간을 가지도록 하겠습니다.
JQuery를 이용해서 애니메이션 효과를 줘보도록 하겠습니다.
01. JQuery란?
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다.
또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다.
직접 코드를 변경하고, 그 결과를 확인할 수 있는 온라인 에디터입니다.
02. 사용법
JQuery를 사용하기 위해서는 JQuery 라이브러리를 웹페이지에 연결해서 사용해야 합니다.
현재 1.1.x,2.x,3.x 버전을 지원해주고 있으며 각 버전별로 브라우저 지원이나 기존 메서드들의 지원 여부 등의 차이가 있습니다.
라이브러리를 연결하는 방식에는 파일을 직접 다운로드받아 연결하는 방식과 CDN 방식이 있습니다.
파일 형식에는 compressed(압축) 파일과 uncompressed(비압축)파일이 있습니다. 일반적으로 압축파일을 사용합니다.
02-1. Download 방식
크롬 브라우저에서 다운을 받을 경우 웹페이지에 있는 라이브러리 코드 전체를 복사하여 웹 에디터에서 붙여 넣고 jquery-3.3.1.min.js로 저장해 주면 됩니다.
A. jquery 라이브러리 다운로드
https://jquery.com/Download에 접속하여 'Download the compressed, production jQuery 3.3.1'를 다운로드 합니다.
B. HTML 문서에서 jQuery 라이브러리 연결하기
html문서를 jQuery 라이브러리와 같은 경로에 저장합니다. 라이브러리가 잘 연결되었는지 확인하기 위해
jQuery 명령어 $(document).ready()를 사용해보겠습니다.
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 라이브러리 연결</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document). ready(function() {
console.log("jQuery 시작");
});
</script>
</head>
<body>
</body>
</html>
}
결과보기
02-2. CDN 방식
A. CDN 카피하기
https://code.jquery.com 사이트에 접속하여 jQuery Core 3.3.1 - minfied 버전을 선택하고 CDN을 카피합니다.
B. HTML 문서에서 jQuery 라이브러리 연결하기
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 라이브러리 연결</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js
"integrity="sha256-FapCb/KJQ1LNf0u91ta32o/NMZx1twRo8QtmkMRdAu8="crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
console.log("jQuery 시작");
});
</script>
</head>
<body>
</body>
</html>
}
결과보기
03. jQuery 기본 형식
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 기본형식</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
실행문;
});
</script>
</head>
<body>
</body>
</html>
}
jQuery는 기본적으로 $(document).ready()로 시작합니다. ready()는 jQuery 이벤트로 앞에서 학습한 자바스크립트의 load 이벤트와 유사한 기능을 가지고 있습니다. $(document).ready()를 짧게 표현할 수도 있습니다. 두 개의 구무 중 편한 것으로 선택하여 사용하면 됩니다.
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Migrate Plugin</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function() {
실행문;
})
</script>
</head>
<body>
</body>
</html>
}
댓글