BD 29일차
jQuery의 주요 개념과 기능을 블로그 포스팅용으로 쉽게 정리해 드리겠습니다.
jQuery 기초부터 활용까지: 동적인 웹사이트 만들기
웹사이트를 더 동적으로, 더 쉽게 만들고 싶으신가요? 🤔
JavaScript보다 간단한 문법으로 클릭 이벤트, 애니메이션 효과 등을 쉽게 구현할 수 있는 jQuery를 배워보세요!
📌 jQuery란?
jQuery는 JavaScript를 더 쉽게 사용할 수 있도록 만들어진 라이브러리입니다.
jQuery의 특징
- 간결한 문법: JavaScript로 길게 작성해야 하는 코드를 짧고 직관적으로 표현할 수 있음
- CSS 선택자 방식 사용:
$(선택자).동작()형태로 사용 가능 - 다양한 효과 지원: fadeIn, fadeOut, slideUp, slideDown 등 쉽게 애니메이션 효과 추가 가능
- 이벤트 핸들링 가능: 클릭, 마우스 오버, 키보드 입력 등 다양한 이벤트 처리 가능
🔥 jQuery 기본 문법
1️⃣ jQuery 기본 구조
$(document).ready(function() {
// jQuery 코드 실행
});또는 더 짧게:
$(function() {
// jQuery 코드 실행
});💡 즉, 웹페이지가 로딩된 후 실행할 코드들을 여기에 작성하면 됩니다!
🎯 jQuery 선택자
CSS에서 요소를 선택하는 방식과 동일하게 사용됩니다!
| 선택자 유형 | 예제 | 설명 |
|---|---|---|
| 아이디 선택 | $("#myId") | id="myId"인 요소 선택 |
| 클래스 선택 | $(".myClass") | class="myClass"인 요소 선택 |
| 태그 선택 | $("p") | 모든 <p> 태그 선택 |
| 복합 선택 | $("div p") | <div> 안의 모든 <p> 태그 선택 |
✨ 예제: 클릭 이벤트 적용
$(document).ready(function() {
$("#btn").click(function() {
alert("버튼이 클릭되었습니다!");
});
});📌 $("#btn") → id="btn"인 요소를 선택하여, 클릭하면 alert 창을 띄우도록 설정
🛠 jQuery 주요 기능
1️⃣ HTML 내용 읽고 변경하기 (Getter & Setter)
let text = $("h1").html(); // h1 태그 안의 내용을 가져오기 (Getter)
$("h1").html("새로운 제목"); // h1 태그 내용을 변경하기 (Setter)💡 괄호 안에 값을 넣으면 Setter, 안 넣으면 Getter입니다!
2️⃣ 요소 추가하기 (append vs prepend)
$("#list").append("<li>새로운 아이템</li>"); // 리스트 마지막에 추가
$("#list").prepend("<li>최상단 아이템</li>"); // 리스트 맨 앞에 추가📌 append()는 뒤에 추가, prepend()는 앞에 추가
3️⃣ 요소 표시 & 숨기기 (fadeIn, fadeOut)
$("#box").fadeOut(); // 서서히 사라짐
$("#box").fadeIn(); // 서서히 나타남📌 fadeOut()은 서서히 사라지고, fadeIn()은 서서히 나타납니다
4️⃣ 슬라이드 효과 (slideUp, slideDown)
$("#panel").slideUp(); // 위로 접히면서 사라짐
$("#panel").slideDown(); // 아래로 펼쳐지면서 나타남5️⃣ 요소 숨기기 & 보이기
$("#popup").hide(); // 숨김
$("#popup").show(); // 보임📌 웹사이트에서 X 버튼을 눌렀을 때 팝업이 사라지는 효과에 자주 사용됩니다!
🎬 실전 예제: 버튼 클릭 시 텍스트 변경
<h1 id="title">Hello, jQuery!</h1>
<button id="changeText">변경하기</button>
<script>
$(document).ready(function() {
$("#changeText").click(function() {
$("#title").html("jQuery로 변경 완료!");
});
});
</script>🖱 버튼 클릭하면 h1 태그의 텍스트가 변경되는 간단한 예제입니다!
🚀 마무리
이제 jQuery를 사용하면 클릭, 애니메이션, 요소 조작 등을 간단하게 구현할 수 있습니다.
JavaScript보다 더 간결하고 직관적인 코드로 웹사이트를 동적으로 만들 수 있다는 점이 큰 장점입니다!
📌 다음 단계
- jQuery 이벤트 심화 학습 (click, hover, keypress 등)
- AJAX 활용하여 데이터 비동기 처리
- jQuery 플러그인 활용하기
✨ 직접 실습해보면서 익혀보세요! 🚀
