728x90
1. jQuery 선택자: HTML 요소를 효율적으로 찾기
jQuery 선택자는 HTML 문서 내 특정 요소를 효율적으로 선택하는 데 사용됩니다. 복잡한 DOM 구조에서도 필요한 요소를 쉽고 빠르게 찾을 수 있습니다.
1.1 기본 선택자
태그 선택자
특정 태그를 선택하여 스타일을 적용하거나 조작합니다.
$("p").css("color", "blue"); // 모든 <p> 태그를 파란색으로 변경추가 예제:
$("h1, h2, h3").css("font-family", "Arial"); // 모든 헤더 태그에 폰트 설정
$("table").css("border", "1px solid black"); // 모든 테이블에 테두리 추가아이디 선택자
문서에서 고유한 ID를 가진 요소를 선택합니다.
$("#header").text("jQuery Tutorial"); // ID가 'header'인 요소의 텍스트 변경추가 예제:
$("#submitBtn").attr("disabled", true); // 특정 버튼 비활성화
$("#menu").css({"background-color": "#333", "color": "white"}); // 메뉴 스타일링클래스 선택자
동일한 클래스를 가진 여러 요소를 선택하여 일괄 조작합니다.
$(".highlight").hide(); // 클래스가 'highlight'인 요소 숨기기추가 예제:
$(".error").css("color", "red"); // 오류 메시지를 빨간색으로 표시
$(".card").css("box-shadow", "0 4px 8px rgba(0,0,0,0.2)"); // 카드 UI에 그림자 추가1.2 복합 및 필터링 선택자
복합 선택자
여러 조건을 조합하여 특정 요소를 선택합니다.
$("div.myClass").css("background-color", "yellow"); // 클래스가 'myClass'인 <div>만 선택추가 예제:
$("ul.myList > li.active").css("font-weight", "bold"); // 특정 조건의 리스트 항목 강조
$("section.intro p:first-of-type").css("text-decoration", "underline"); // 첫 번째 문단 밑줄필터 메소드
선택한 요소 집합에서 특정 조건을 만족하는 요소를 필터링합니다.
$("li").first().css("font-weight", "bold"); // 첫 번째 리스트 항목 강조
$("li").last().css("font-style", "italic"); // 마지막 리스트 항목 이탤릭체로 변경추가 예제:
$("tr:even").css("background-color", "#f2f2f2"); // 테이블의 짝수 행 배경색 변경
$("img[alt]").css("border", "2px solid green"); // alt 속성이 있는 이미지 강조1.3 자식 및 후손 선택자
자식 요소 선택자
특정 부모 요소의 직계 자식을 선택합니다.
$("ul > li").css("color", "green"); // ul의 직계 자식인 li 요소만 선택추가 예제:
$("div.container > p.title").css("font-size", "24px"); // 특정 컨테이너 내 자식 요소 스타일링
$("nav > ul > li:first-child").css("text-transform", "uppercase"); // 네비게이션 첫 항목 대문자화후손 요소 선택자
부모 요소의 모든 후손 요소를 선택합니다.
$("div p").css("line-height", "1.5"); // div 안의 모든 p 요소 선택추가 예제:
$("section.article span").css("color", "blue"); // 특정 섹션 내의 모든 span 요소
$("form input[type='text']").css("padding", "10px"); // 모든 텍스트 입력 필드에 패딩 추가2. jQuery 메소드: HTML 조작 및 스타일링
jQuery 메소드는 선택한 요소의 콘텐츠, 스타일, 속성 등을 변경하거나 추가 작업을 수행하는 데 사용됩니다.
2.1 주요 메소드
html()
HTML 콘텐츠를 가져오거나 설정합니다.
$("#content").html("<strong>안녕하세요!</strong>");추가 예제:
$(".description").html("<em>설명이 업데이트되었습니다.</em>");
$("div.note").html(function(index, oldHtml) {
return oldHtml + "<br>추가 내용이 있습니다.";
});css()
CSS 속성을 가져오거나 설정합니다.
$("p").css("color", "red");추가 예제:
$(".box").css({
"width": "100px",
"height": "100px",
"background-color": "blue"
});
$(".card").css("margin", function(index) {
return index * 10 + "px";
});attr()
속성을 가져오거나 설정합니다.
$("img").attr("src", "new_image.jpg");추가 예제:
$("a").attr("href", function(index, oldValue) {
return oldValue + "?ref=dynamic";
});
$("input[placeholder]").attr("placeholder", "새로운 텍스트를 입력하세요");3. jQuery 이벤트 처리: 사용자와 상호작용
jQuery는 다양한 이벤트를 간단하게 처리할 수 있습니다. 클릭, 키 입력 등 사용자와의 상호작용을 효율적으로 관리할 수 있습니다.
3.1 기본 이벤트 처리
click 이벤트
사용자가 특정 요소를 클릭했을 때 실행됩니다.
$("#button").on("click", function() {
alert("버튼이 클릭되었습니다!");
});추가 예제:
$(".item").on("click", function() {
$(this).toggleClass("selected");
});
$("button.submit").on("click", function() {
console.log("폼이 제출되었습니다.");
});3.2 동적 요소 이벤트 처리
동적으로 추가된 요소에도 이벤트를 바인딩할 수 있습니다.
$(document).on("click", ".dynamic-item", function() {
alert("동적 항목이 클릭되었습니다!");
});추가 예제:
$(document).on("mouseenter", "li.hoverable", function() {
$(this).css("background-color", "lightblue");
}).on("mouseleave", "li.hoverable", function() {
$(this).css("background-color", "");
});4. 실습 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight { background-color: yellow; }
.selected { background-color: lightgreen; }
</style>
</head>
<body>
<h1 id="header">jQuery 예제</h1>
<button id="button">클릭하세요</button>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li class="highlight">세 번째 항목</li>
</ul>
<div id="popup" style="display:none;">팝업 메시지</div>
<script>
$("#header").text("jQuery 학습하기");
$("#button").on("click", function() {
alert("버튼이 클릭되었습니다!");
});
$(".highlight").hide();
$("li").css("font-size", "18px");
$("#popup").fadeIn(500).delay(2000).fadeOut(500);
</script>
</body>
</html>5. 결론
jQuery는 선택자, 메소드, 이벤트 처리 등 다양한 기능을 제공하여 웹 개발을 간편하고 효율적으로 만들어줍니다. 이를 활용하면 사용자 경험을 향상시키고 유지보수가 쉬운 코드를 작성할 수 있습니다. jQuery를 익혀 직관적이고 반응성 높은 웹 애플리케이션을 개발해 보세요.
728x90
'프로그래밍 > Javascript' 카테고리의 다른 글
| jQuery AJAX: 비동기 웹 개발의 완벽 가이드 (0) | 2025.02.16 |
|---|---|
| jQuery와 DOM: 웹 개발의 필수 기술 (0) | 2025.02.16 |
| jQuery 소개: 웹 개발의 필수 도구와 활용법 (0) | 2025.02.16 |
| 자바스크립트 데코레이터 완벽 가이드: 개념부터 실전까지 (0) | 2025.02.15 |
| 자바스크립트의 미래: 새로운 기능과 혁신적인 변화 (0) | 2025.02.15 |