jQuery 라이브러리란?
jQuery의 특징과 장점
- 간단한 문법: jQuery는 복잡한 JavaScript 코드를 간단하게 작성할 수 있도록 도와줍니다. 선택자와 메서드를 통해 HTML 요소를 쉽게 조작할 수 있습니다.
- 크로스 브라우저 호환성: jQuery는 여러 브라우저에서 동일하게 동작하도록 설계되었습니다. 이는 브라우저 간의 호환성 문제를 해결하는 데 큰 도움이 됩니다.
- 풍부한 플러그인: jQuery에는 많은 플러그인이 있어, 다양한 기능을 쉽게 추가할 수 있습니다. 슬라이더, 모달 창, 데이터 테이블 등 다양한 기능을 구현할 수 있는 플러그인이 제공됩니다.
- 이벤트 처리: jQuery는 다양한 이벤트를 쉽게 처리할 수 있는 기능을 제공합니다. 클릭, 마우스 오버, 키보드 입력 등 다양한 이벤트를 간단하게 처리할 수 있습니다.
- 애니메이션 효과: jQuery를 사용하면 복잡한 애니메이션을 간단한 코드로 구현할 수 있습니다. 페이드 인/아웃, 슬라이드 업/다운 등의 효과를 쉽게 적용할 수 있습니다.
- Ajax 지원: jQuery는 Ajax 통신을 쉽게 할 수 있도록 도와줍니다. 이를 통해 서버와 비동기식으로 데이터를 주고받아 웹 페이지를 동적으로 업데이트할 수 있습니다.
jQuery를 사용하려면 먼저 jQuery 라이브러리를 HTML 파일에 포함해야 합니다. 이를 위해 jQuery 파일을 직접 다운로드하여 포함하거나 CDN(Content Delivery Network)을 이용할 수 있습니다.
CDN을 통한 jQuery 포함
HTML 파일의 <head> 태그 내에 다음과 같은 <script> 태그를 추가합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- jQuery를 사용한 내용이 여기 들어갑니다. --> </body> </html>
로컬 파일을 통한 jQuery 포함
jQuery 파일을 다운로드한 후, HTML 파일에 다음과 같이 포함합니다.
<!DOCTYPE html>
<html lang="ko">
<head> <meta charset="UTF-8">
<title>jQuery Example</title>
<script src="path/to/jquery-3.6.0.min.js"></script> </head>
<body> <!-- jQuery를 사용한 내용이 여기 들어갑니다 --> </body> </html>
$(document).ready() 함수
$(document).ready() 함수는 문서가 완전히 로드되고 DOM이 준비된 후에 실행되는 코드를 포함시킬 수 있도록 합니다. 이는 페이지가 로드될 때마다 JavaScript 코드가 실행되도록 보장합니다.
<!DOCTYPE html> <html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> $(document).ready(function() { alert("문서가 준비되었습니다!"); }); </script> </head>
<body> <!-- jQuery를 사용한 내용이 여기 들어갑니다 --> </body> </html>
이 코드는 문서가 완전히 로드되고 나면 "문서가 준비되었습니다!"라는 경고 창을 띄웁니다.