jQuery 고급 선택자 (Advanced Selectors)
jQuery 고급 선택자는 더 복잡하고 구체적인 요소 선택을 가능하게 합니다. 이러한 선택자를 사용하면 특정 구조, 상태, 속성을 가진 요소를 손쉽게 선택할 수 있습니다.
자식 및 후손 선택자 (Child and Descendant Selectors)
자식 선택자 (Child Selector)
자식 선택자는 특정 요소의 직계 자식을 선택합니다. 부모 요소와 자식 요소 사이에 > 기호를 사용합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자식 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul > li").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<ul>
<li>하위 항목</li>
</ul>
</ul>
</body>
</html>
위 코드에서는 <ul>의 직계 자식인 <li> 요소들의 텍스트 색상을 빨간색으로 변경합니다. 중첩된 <li>는 영향을 받지 않습니다.
후손 선택자 (Descendant Selector)
후손 선택자는 특정 요소의 모든 후손을 선택합니다. 공백을 사용하여 부모 요소와 후손 요소를 구분합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>후손 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("div p").css("color", "blue");
});
</script>
</head>
<body>
<div>
<p>첫 번째 단락</p>
<span>
<p>두 번째 단락</p>
</span>
</div>
</body>
</html>
위 코드에서는 <div> 요소의 모든 후손 <p> 요소들의 텍스트 색상을 파란색으로 변경합니다.
형제 선택자 (Sibling Selectors)
형제 선택자는 동일한 부모를 가진 형제 요소를 선택합니다.
인접 형제 선택자 (Adjacent Sibling Selector)
인접 형제 선택자는 특정 요소 바로 다음에 오는 형제를 선택합니다. + 기호를 사용합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인접 형제 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("h1 + p").css("font-weight", "bold");
});
</script>
</head>
<body>
<h1>제목</h1>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</body>
</html>
위 코드에서는 <h1> 바로 다음에 오는 <p> 요소의 글자 굵기를 굵게 설정합니다.
일반 형제 선택자 (General Sibling Selector)
일반 형제 선택자는 특정 요소의 모든 형제를 선택합니다. ~ 기호를 사용합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>일반 형제 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("h1 ~ p").css("font-style", "italic");
});
</script>
</head>
<body>
<h1>제목</h1>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</body>
</html>
위 코드에서는 <h1> 이후의 모든 <p> 요소의 글자 스타일을 이탤릭체로 변경합니다.
필터 선택자 (Filter Selectors)
필터 선택자는 선택된 요소 집합을 특정 기준에 따라 필터링합니다.
첫 번째 선택자 (First Selector)
첫 번째 선택자는 선택된 요소 중 첫 번째 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>첫 번째 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p:first").css("text-decoration", "underline");
});
</script>
</head>
<body>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</body>
</html>
위 코드에서는 첫 번째 <p> 요소에 밑줄을 그립니다.
마지막 선택자 (Last Selector)
마지막 선택자는 선택된 요소 중 마지막 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마지막 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p:last").css("text-decoration", "line-through");
});
</script>
</head>
<body>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</body>
</html>
위 코드에서는 마지막 <p> 요소에 취소선을 그립니다.
짝수 선택자 (Even Selector)
짝수 선택자는 선택된 요소 중 짝수 인덱스에 해당하는 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>짝수 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("li:even").css("background-color", "lightgray");
});
</script>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
</ul>
</body>
</html>
위 코드에서는 짝수 인덱스에 해당하는 <li> 요소의 배경색을 밝은 회색으로 설정합니다.
홀수 선택자 (Odd Selector)
홀수 선택자는 선택된 요소 중 홀수 인덱스에 해당하는 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>홀수 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("li:odd").css("background-color", "lightblue");
});
</script>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
</ul>
</body>
</html>
위 코드에서는 홀수 인덱스에 해당하는 <li> 요소의 배경색을 밝은 파란색으로 설정합니다.
상태 선택자 (State Selectors)
상태 선택자는 요소의 상태에 따라 선택합니다.
활성화된 선택자 (Enabled Selector)
활성화된 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>활성화된 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("input:enabled").val("활성화됨");
});
</script>
</head>
<body>
<input type="text" value="입력 가능">
<input type="text" value="입력 불가" disabled>
</body>
</html>
위 코드에서는 활성화된 <input> 요소의 값을 “활성화됨”으로 변경합니다.
비활성화된 선택자 (Disabled Selector)
비활성화된 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비활성화된 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("input:disabled").val("비활성화됨");
});
</script>
</
head>
<body>
<input type="text" value="입력 가능">
<input type="text" value="입력 불가" disabled>
</body>
</html>
위 코드에서는 비활성화된 <input> 요소의 값을 “비활성화됨”으로 변경합니다.
체크된 선택자 (Checked Selector)
체크된 요소를 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>체크된 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("input:checked").next("label").css("font-weight", "bold");
});
</script>
</head>
<body>
<input type="checkbox" id="chk1">
<label for="chk1">첫 번째 항목</label><br>
<input type="checkbox" id="chk2" checked>
<label for="chk2">두 번째 항목</label>
</body>
</html>
위 코드에서는 체크된 <input> 요소의 다음에 오는 <label> 요소의 글자 굵기를 굵게 설정합니다.
가상 선택자 (Pseudo Selectors)
가상 선택자는 특정 조건을 기준으로 요소를 선택합니다.
첫 번째 자식 선택자 (First Child Selector)
첫 번째 자식을 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>첫 번째 자식 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul li:first-child").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
</body>
</html>
위 코드에서는 <ul>의 첫 번째 <li> 요소의 텍스트 색상을 빨간색으로 변경합니다.
마지막 자식 선택자 (Last Child Selector)
마지막 자식을 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마지막 자식 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul li:last-child").css("color", "blue");
});
</script>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
</body>
</html>
위 코드에서는 <ul>의 마지막 <li> 요소의 텍스트 색상을 파란색으로 변경합니다.
N번째 자식 선택자 (Nth Child Selector)
N번째 자식을 선택합니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>N번째 자식 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul li:nth-child(2)").css("color", "green");
});
</script>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
</body>
</html>
위 코드에서는 <ul>의 두 번째 <li> 요소의 텍스트 색상을 초록색으로 변경합니다.
이와 같이 jQuery의 고급 선택자를 사용하면 더 정교하고 구체적인 요소 선택이 가능합니다. 이러한 선택자들을 적절히 활용하면 웹 페이지의 특정 요소를 쉽게 선택하고 조작할 수 있습니다.