사용자 정의 의사 선택자 구축
jQuery.expr[':']에 직접 만든 사용자 정의 의사 선택자를 등록해 복잡한 요소 선택 로직을 단순화하고 코드 가독성을 높이는 방법을 배웁니다.
사용자 정의 의사 선택자 구축은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
사용자 지정 선택자가 필요한 이유
jQuery에 내장된 선택자는 매우 강력하지만, 때로는 복잡하거나 반복적인 특정 필터링 요구 사항을 마주하게 됩니다.
이럴 때 사용자 지정 의사 선택자가 유용합니다! 사용자만의 특수 필터를 정의하여 복잡한 선택 로직을 단순화하고 코드를 더 깔끔하고 읽기 쉽게 만들 수 있습니다.
기본 선택자가 충분하지 않을 때
특정 클래스를 가지고 있을 뿐 아니라 data-status 속성의 값이 'active'인 모든 <div> 요소를 자주 선택해야 하는 상황을 생각해 보십시오.
표준 선택자를 조합할 수도 있지만, 로직이 더 복잡하거나 애플리케이션 전체에서 반복적으로 적용해야 한다면 코드가 길어지고 직관적이지 않게 될 수 있습니다.
jQuery.expr[':'] 알아보기
jQuery.expr[':']는 사용자 지정 의사 선택자를 등록하는 객체입니다. jQuery의 핵심 선택 엔진을 확장하는 기능이라고 생각하시면 됩니다.
jQuery가 :myCustomSelector와 같은 선택자를 만나면 이 객체에서 myCustomSelector를 찾습니다. 선택자 이름을 키로 하여 함수를 할당하면 jQuery가 검사하는 각 요소에 대해 해당 함수를 실행합니다.
`:has-tooltip` 정의하기
title 속성이 있는 요소를 식별하는 간단한 사용자 지정 선택자 :has-tooltip을 정의해 보겠습니다. 다음과 같이 jQuery.expr[':']에 추가할 수 있습니다.
제공하는 함수는 검사 중인 현재 DOM elem을 받습니다. 요소가 기준에 부합하면 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다.
jQuery.expr[':'].hasTooltip = function(elem) {
// Check if the element has a 'title' attribute
return !!$(elem).attr('title');
};사용자 지정 선택자 사용하기
이제 :has-tooltip 선택자를 정의했으므로 다른 jQuery 의사 선택자와 마찬가지로 사용할 수 있습니다! 아래 예제를 실행해 보십시오.
title 속성이 있는 모든 요소가 강조 표시되어 새 사용자 지정 필터의 강력한 기능을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.highlight {
border: 2px solid green;
background-color: #e0ffe0;
}
</style>
</head>
<body>
<p title="This is a tooltip">Paragraph with tooltip</p>
<div id="no-tooltip">Just a div</div>
<span title="Another tooltip here">Span with tooltip</span>
<script>
jQuery.expr[':'].hasTooltip = function(elem) {
return !!$(elem).attr('title');
};
$(document).ready(function() {
$('p:has-tooltip, span:has-tooltip').addClass('highlight');
});
</script>
</body>
</html>`elem`, `i`, `match` 인수
사용자 지정 선택자 함수가 실행되면 세 가지 중요한 인수를 받습니다.
elem: 검사 중인 현재 DOM 요소입니다.i: jQuery가 현재 순회 중인 요소 집합에서elem의 인덱스입니다.match: 선택자를 분석하는 데 사용된 정규 표현식의 결과가 들어 있는 배열입니다. 인수를 받는 선택자에 필수적입니다.
간단한 선택자에서는 주로 elem 인수를 사용합니다.
데이터 속성을 기반으로 한 선택자
data-status 속성이 'active'와 같은 요소를 찾는 :data-status(active) 선택자를 만들어 보겠습니다. 이 예제에서는 match 인수를 사용하는 방법을 보여 줍니다.
괄호 안의 인수인 'active' 값은 match[3]에서 찾을 수 있습니다. 따라서 선택자를 동적으로 만들 수 있습니다!
<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.active-item {
background-color: lightgreen;
padding: 5px;
margin: 3px;
}
</style>
</head>
<body>
<div data-status="active">Item 1 (Active)</div>
<div data-status="inactive">Item 2 (Inactive)</div>
<p data-status="active">Item 3 (Active)</p>
<span>Item 4 (No Status)</span>
<script>
jQuery.expr[':'].dataStatus = function(elem, i, match) {
const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
const actualStatus = $(elem).data('status');
return actualStatus === expectedStatus;
};
$(document).ready(function() {
$(':data-status(active)').addClass('active-item');
});
</script>
</body>
</html>`match[3]` 이해하기
match 배열은 선택자 문자열을 jQuery의 내부 정규 표현식으로 분석한 결과입니다. :yourSelector(argument)와 같은 선택자에서는 일반적으로 argument 부분이 match[3]에 캡처됩니다.
이 메커니즘은 매개변수를 받을 수 있는 동적이고 유연한 사용자 지정 선택자를 만드는 데 매우 중요하며, 다양한 필터링 상황에서 선택자를 더욱 재사용 가능하고 강력하게 만들어 줍니다.
고급 논리: `:containsExact`
더 고급 선택자인 :containsExact(text)를 만들어 보겠습니다. jQuery의 기본 :contains()와 달리, 이 선택자는 자식 요소를 제외한 전체 텍스트 내용이 제공된 텍스트와 정확히 일치하는 요소만 선택합니다.
이를 위해 $(elem).text().trim()의 결과를 신중하게 비교하여 정확히 일치하는지 확인하는 경우가 많습니다.
<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.exact-match {
font-weight: bold;
color: blue;
background-color: #e0f0ff;
padding: 5px;
margin: 3px;
}
</style>
</head>
<body>
<div>Hello World</div>
<div>Hello there!</div>
<p>Hello</p>
<span>World</span>
<script>
jQuery.expr[':'].containsExact = function(elem, i, match) {
const searchText = match[3]; // The text inside the parentheses
const elementText = $(elem).text().trim();
return elementText === searchText;
};
$(document).ready(function() {
$(':containsExact(Hello World)').addClass('exact-match');
});
</script>
</body>
</html>사용자 지정 선택자 사용 팁
사용자 지정 선택자를 만들 때 다음 모범 사례를 기억해 두세요.
- 성능: 복잡한 논리는 특히 DOM이 클 때 성능에 영향을 줄 수 있습니다. 선택자 함수를 최적화하세요.
- 명확성: 코드를 읽는 사람이 용도를 즉시 알 수 있도록 선택자 이름을 명확하게 지정하세요.
- 재사용성: 특정 한 가지 상황뿐 아니라 다양한 맥락에서 유용하도록 충분히 일반적인 형태로 설계하세요.
- 충돌 방지: 나중에 사용할 jQuery 선택자나 다른 플러그인과 충돌하지 않도록 고유한 이름을 선택하세요.
사용자 지정 선택자 도전
텍스트 내용과 자식 요소가 전혀 없는 요소를 선택하는 사용자 지정 선택자 :is-empty를 만들려고 합니다. 이는 jQuery에 내장된 :empty 선택자와 비슷합니다.
다음 코드 조각 중 이 사용자 지정 의사 선택자를 올바르게 정의하는 것은 무엇인가요?
복습: 사용자 지정 선택자
이번 레슨에서는 jQuery.expr[':']를 사용하여 자신만의 사용자 지정 의사 선택자를 만들고, jQuery의 강력한 선택 기능을 확장하는 방법을 배웠습니다.
간단한 선택자를 정의하고, match 배열을 통해 매개변수를 전달하며, 복잡한 필터링 논리를 단순화하는 방법을 살펴보았습니다. 그 결과 jQuery 코드를 더 읽기 쉽고, 유지 관리하기 쉽고, 효율적으로 만들 수 있습니다.
자주 묻는 질문
“사용자 정의 의사 선택자 구축” 강의는 무료인가요?
네 — “사용자 정의 의사 선택자 구축” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“사용자 정의 의사 선택자 구축”에서 뭘 배우나요?
jQuery.expr[':']에 직접 만든 사용자 정의 의사 선택자를 등록해 복잡한 요소 선택 로직을 단순화하고 코드 가독성을 높이는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
jQuery Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.
“사용자 정의 의사 선택자 구축” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 사용자 정의 의사 선택자 구축
- .filter()를 활용한 고급 필터링
- .not()으로 요소 제외하기