jQuery란?
jQuery란 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다.
01. jQuery 장점
제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.
02. jQuery 적용
제이쿼리는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재합니다. 따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 합니다. 파일을 다운받아 로드하는 방법 외에도 CDN(Content Delivery Network)을 이용하여 로드하는 방법이 있습니다.
02-1. 파일을 다운받아 로드하는 방법
먼저, http://jquery.com/download에 접속하여 'Download the compressed, production jQuery 3.3.1'를 다운로드 합니다. html 문서를 jQuery 라이브러리와 같은 경로에 저장합니다. 라이브러리가 잘 연결되었는지 확인하기 위해 jQuery 명령어 $(document).ready()를 사용합니다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 라이브러리 연결</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
console.log("jQuery 시작");
});
</script>
</head>
</html>
02-2. CDN을 이용하여 로드하는 방법
CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술입니다. 이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 라이브러리 연결</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js
"integrity="sha256-FgpCb/KJQ1LNfOu91ta32o/NMZx1twRo8QtmkMRdAu8="crossorigin="annonymous"></script>
<script>
$(document).ready(function(){
console.log("jQuery 시작");
});
</script>
</head>
<body>
</body>
</html>
03. jQuery 기본형식
jQuery는 기본적으로 $(document).ready()로 시작합니다. ready()는 jQuery 이벤트로 자바스크립트의 load 이벤트와 유사한 기능을 가지고 있습니다. $(document).ready()를 짧게 표현할 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">;
<head>
<meta charset="UTF-8">
<title>jQuery 기본형식</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
//기본형식
$(document).ready(function(){
실행문;
});
//짧게 표현한 형식
$(function() {
실행문;
});
</script>
</head>
<body>
</body>
</html>
04. 적용
'jQuery' 카테고리의 다른 글
| [jQuery]클래스 관련 메서드 (1) | 2022.09.02 |
|---|---|
| [jQuery]탐색 선택자 (3) | 2022.08.30 |
| [jQuery]필터 선택자 (2) | 2022.08.30 |
| [jQuery]속성 선택자 (3) | 2022.08.30 |
| [jQuery]기본 선택자 (2) | 2022.08.30 |
댓글