jQuery - 기본 사용법 및 개념
jQuery는 가볍고, 강력한 JavaScript 라이브러리입니다. 웹 개발을 더 쉽고 빠르게 할 수 있도록 다양한 기능을 제공합니다. 이번 포스팅에서는 jQuery의 기본 사용법과 개념을 알아보겠습니다.
jQuery 시작하기
jQuery 연결하기
jQuery를 사용하기 위해서는 먼저 jQuery 라이브러리를 웹 페이지에 연결해야 합니다. 가장 간단한 방법은 CDN(Content Delivery Network)을 통해 jQuery를 연결하는 것입니다.
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>jQuery 문법
jQuery의 기본 문법은 $로 시작합니다. $는 jQuery의 별칭으로, jQuery 함수에 접근하기 위해 사용됩니다.
$(selector).action();- `selector`는 HTML 요소를 선택하고
- `action()`은 선택된 요소에 적용될 작업(함수)입니다.
예제: 요소 선택 및 조작
HTML 요소를 선택하고 텍스트를 변경하는 간단한 예제를 살펴봅시다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>이 텍스트를 클릭하면 숨겨집니다.</p>
</body>
</html>이 예제에서는 <p> 태그가 클릭되면 해당 <p> 태그를 숨기는 기능을 구현했습니다.
기본 선택자
jQuery는 CSS 선택자를 사용하여 HTML 요소를 쉽게 선택할 수 있습니다.
ID 선택자
ID를 사용하여 특정 요소를 선택합니다.
$("#myId").action();클래스 선택자
클래스를 사용하여 요소 그룹을 선택합니다.
$(".myClass").action();요소 선택자
특정 타입의 모든 요소를 선택합니다.
$("p").action();이벤트 핸들링
jQuery를 사용하면 다양한 사용자 이벤트를 쉽게 처리할 수 있습니다.
클릭 이벤트
클릭 이벤트를 처리하는 예제입니다.
$("p").click(function(){
// 클릭 이벤트 발생시 실행될 코드
});문서 준비 이벤트
jQuery 코드는 대부분 `$(document).ready()` 내부에 작성됩니다. 이는 문서의 모든 요소가 로드된 후 jQuery 코드가 실행되도록 보장합니다.
$(document).ready(function(){
// 페이지 로드 완료 후 실행될 코드
});'JQuery' 카테고리의 다른 글
| JQuery - 유틸리티 함수 (2) | 2024.01.28 |
|---|---|
| jQuery - AJAX 통신 (0) | 2024.01.28 |
| JQuery - 애니메이션 및 효과 (0) | 2024.01.28 |
| jQuery - 이벤트 핸들링 (1) | 2024.01.28 |
| jQuery - DOM 조작 (0) | 2024.01.27 |
댓글