jQuery 필터 선택자로 효율적인 DOM 조작하기
jQuery 필터 선택자: DOM 조작의 효율성을 높이자
안녕하세요! 프로그래밍과 웹 개발에 관심 있는 여러분, 오늘은 jQuery의 필터 선택자에 대해 알아보겠습니다. 간단한 코드 예제를 통해 선택자의 종류와 사용법을 설명하며, 여러분이 웹 페이지의 특정 요소를 효과적으로 선택하고 조작할 수 있는 방법을 안내하겠습니다.
들어가며
웹 개발을 하다 보면 특정 요소를 선택하고 스타일을 적용하거나 이벤트를 처리해야 할 때가 많습니다. jQuery는 DOM을 쉽게 조작할 수 있는 강력한 도구인데요, 그 중에서도 필터 선택자는 더욱 섬세하게 요소를 선택할 수 있게 도와줍니다.
그럼 이제 필터 선택자에 대해 구체적으로 살펴볼까요?
기본 필터 선택자
jQuery의 기본 필터 선택자는 다음과 같은 방식으로 요소를 선택할 수 있습니다:
:odd: 홀수 번째 위치한 요소 선택:even: 짝수 번째 위치한 요소 선택:first: 첫 번째 위치한 요소 선택:last: 마지막 위치한 요소 선택:gt(index): index값보다 큰 index를 가진 요소를 선택:lt(index): index값보다 작은 index를 가진 요소를 선택
예를 들어, 아래 코드는 특정 <p> 태그와 <li> 요소를 선택하여 색상을 변경하는 방식으로 실행됩니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - 기본 필터 선택자</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:even").css("color", "red"); // 짝수 번째 p 요소
$("p:odd").css("color", "green"); // 홀수 번째 p 요소
$("p:first").css("color", "blue");
$("p:last").css("color", "pink");
$(".third > li:gt(2)").css("color", "red"); // 기준 인덱스보다 큰 요소
$(".third > li:lt(2)").css("color", "blue"); // 기준 인덱스보다 작은 요소
});
</script>
</head>
<body>
<p>1월</p>
<p>2월</p>
<p>3월</p>
<p>4월</p>
<p>5월</p>
<br/><br/>
<div>
<ul class="third">
<li>커피</li>
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>우유</li>
</ul>
</div>
</body>
</html>
결과 화면
코드를 실행하면 짝수 번째 <p> 요소는 빨간색, 홀수 번째 요소는 초록색으로 표시되며, 리스트의 특정 요소들도 색상이 변경됩니다.
내용 선택자 필터
다음으로는 내용 기반의 선택자를 살펴보겠습니다. 이 선택자를 사용하면 특정 텍스트가 포함된 요소를 선택할 수 있습니다. 주요 선택자는 다음과 같습니다:
:contains(text): 특정 텍스트가 포함된 요소 선택:has(selector): 특정 선택자를 포함한 요소 선택:empty: 자식 노드를 가지지 않는 요소 선택:parent: 자식 노드를 하나 이상 가지는 요소 선택
예를 들어, 아래 코드는 특정 텍스트를 포함한 <li> 요소의 스타일을 변경합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery - 내용 필터 선택자</title>
<style>
body {
font-size: 12px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("li:contains('ap')").css({
color: "red",
backgroundColor: "yellow",
fontWeight: "bold",
fontSize: "30px"
});
$("#sub:has('li')").css({
color: "pink",
backgroundColor: "green"
});
$("li:parent").css("color", "blue");
$("li:empty").text("Hello");
});
</script>
</head>
<body>
<div>
<ul>
<li>apple</li>
<li>banana</li>
<li>grape</li>
<li></li>
</ul>
<ul id="sub">
<li>lion</li>
<li>tiger</li>
<li>fox</li>
<li></li>
</ul>
</div>
</body>
</html>
결과 화면
이 코드를 실행하면 "apple"이라는 텍스트가 포함된 <li> 요소는 빨간색 배경에 노란색 글씨로 표시됩니다. 자식 요소를 포함한 <div> 요소의 배경 색깔은 초록색으로 변경됩니다.
마무리하며
jQuery의 필터 선택자는 웹 개발에서 반드시 알아두어야 할 중요한 도구입니다. 특히, 복잡한 DOM 구조 속에서 효율적으로 요소를 선택하고 조작하는 데 큰 도움이 됩니다. 여러분도 이 포스트에서 소개한 선택자들을 활용하여 더 나은 웹 페이지를 만들어 보세요!
질문이나 의견이 있으시면 댓글로 남겨주세요. 다음 포스트에서도 유용한 정보를 가져오겠습니다!