BD 24일차
jQuery 기초 및 활용 예제
웹사이트를 더 동적으로 동작하도록 도와주는 jQuery를 함께 학습하고 실습해 보겠습니다. 😊
jQuery란?
jQuery는 자바스크립트를 더 쉽고 간단하게 사용할 수 있게 만든 라이브러리입니다.
- HTML 문서 조작
- 이벤트 처리
- 애니메이션 효과
- Ajax 요청 처리
jQuery 사용법
1. 기본 문법
jQuery를 사용하기 위해서는 다음과 같은 기본적인 문법을 이해해야 합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("버튼이 클릭되었습니다!");
});
});
</script>2. jQuery 선택자
💡 CSS 선택자와 동일한 방식으로 요소를 선택할 수 있습니다.
| 선택 방식 | jQuery 문법 예제 | 설명 |
|---|---|---|
| ID 선택자 | $('#id명') | 특정 ID를 가진 요소 선택 |
| 클래스 선택자 | $('.class명') | 특정 클래스를 가진 요소 선택 |
| 태그 선택자 | $('태그명') | 특정 태그를 선택 |
예제:
$('#myId').text('아이디 선택');
$('.myClass').css('color', 'blue');
$('p').hide();jQuery 이벤트
HTML 요소에 이벤트를 쉽게 추가할 수 있습니다.
1. 클릭 이벤트
$('button').on('click', function() {
alert('버튼 클릭!');
});2. 마우스 이벤트
$('div').mouseenter(function(){
$(this).css('background-color', 'yellow');
});jQuery 메소드 활용
jQuery는 HTML 요소를 조작하는 여러 유용한 메소드를 제공합니다.
1. Getter와 Setter 메소드
💡 요소의 값을 가져오거나 설정하는 메소드입니다.
// Getter (값 읽기)
let value = $('#element').html();
alert(value);
// Setter (값 변경)
$('#element').html('새로운 내용');2. 요소 추가 및 삭제
append(): 요소의 끝 부분에 새로운 요소 추가prepend(): 요소의 시작 부분에 새로운 요소 추가remove(): 선택한 요소 제거
예제:
$('#list').append('<li>새로운 항목 추가</li>');
$('#list').prepend('<li>가장 처음에 추가</li>');
$('#list li:last').remove();jQuery 애니메이션 효과
1. 페이드 효과 (fade)
$('#box').fadeIn();
$('#box').fadeOut();2. 슬라이드 효과 (slide)
$('#panel').slideUp();
$('#panel').slideDown();3. 보이기/숨기기 효과
$('#popup').show();
$('#popup').hide();실습 예제
아래와 같은 HTML 구조에서 jQuery를 적용해 봅시다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">안녕하세요!</h1>
<p class="description">jQuery를 배우고 있습니다.</p>
<button id="btn">클릭하세요</button>
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#title').html('반갑습니다!');
$('.description').toggle();
});
});
</script>
</body>
</html>
요약 및 정리
- jQuery는 웹사이트에 동적인 기능을 추가하기 위해 사용됩니다.
- CSS 선택자와 유사한 방식으로 요소를 선택하고 조작할 수 있습니다.
- 주요 기능:
- 이벤트 처리: 클릭, 마우스, 키보드 이벤트
- HTML 조작:
.html(),.text(),.val() - 요소 추가/삭제:
.append(),.prepend(),.remove() - 애니메이션 효과:
.fadeIn(),.fadeOut(),.slideUp(),.slideDown()
💡 Tip: 실습을 통해 다양한 효과를 직접 적용해 보고, jQuery의 강력함을 경험해 보세요!
