jQuery Selectors 정리
jQuery 선택자(selector)는 HTML 요소를 선택하여 조작하거나 작업을 수행할 수 있도록 도와줍니다. 다양한 형태의 선택자를 아래와 같이 카테고리별로 정리하였습니다.
1. 기본 선택자
| Selector |
예제 |
설명 |
* |
$(" * ") |
모든 요소를 선택. |
#id |
$("#lastname") |
id="lastname"인 요소를 선택. |
.class |
$(".intro") |
class="intro"인 모든 요소를 선택. |
.class,.class |
$(".intro,.demo") |
class="intro" 또는 class="demo"인 요소 선택. |
element |
$("p") |
모든 <p> 요소를 선택. |
el1,el2,el3 |
$("h1,div,p") |
<h1>, <div>, <p> 요소를 모두 선택. |
2. 순서 기반 선택자
| Selector |
예제 |
설명 |
:first |
$("p:first") |
첫 번째 <p> 요소 선택. |
:last |
$("p:last") |
마지막 <p> 요소 선택. |
:even |
$("tr:even") |
짝수 번째 <tr> 요소 선택. |
:odd |
$("tr:odd") |
홀수 번째 <tr> 요소 선택. |
:eq(index) |
$("ul li:eq(3)") |
네 번째 요소 선택 (인덱스 0부터 시작). |
:gt(index) |
$("ul li:gt(3)") |
인덱스가 3보다 큰 모든 요소 선택. |
:lt(index) |
$("ul li:lt(3)") |
인덱스가 3보다 작은 모든 요소 선택. |
3. 구조 기반 선택자
| Selector |
예제 |
설명 |
:first-child |
$("p:first-child") |
부모의 첫 번째 자식인 <p> 요소 선택. |
:last-child |
$("p:last-child") |
부모의 마지막 자식인 <p> 요소 선택. |
:nth-child(n) |
$("p:nth-child(2)") |
부모의 두 번째 자식인 <p> 요소 선택. |
:nth-last-child(n) |
$("p:nth-last-child(2)") |
부모의 끝에서 두 번째 자식인 <p> 요소 선택. |
:only-child |
$("p:only-child") |
부모의 유일한 자식인 <p> 요소 선택. |
:first-of-type |
$("p:first-of-type") |
부모의 첫 번째 <p> 요소 선택. |
:last-of-type |
$("p:last-of-type") |
부모의 마지막 <p> 요소 선택. |
:nth-of-type(n) |
$("p:nth-of-type(2)") |
부모의 두 번째 <p> 요소 선택. |
:only-of-type |
$("p:only-of-type") |
부모의 유일한 <p> 요소 선택. |
4. 계층 구조 선택자
| Selector |
예제 |
설명 |
parent > child |
$("div > p") |
<div>의 자식 <p> 요소를 선택. |
parent descendant |
$("div p") |
<div>의 모든 자손 <p> 요소를 선택. |
element + next |
$("div + p") |
각 <div> 바로 다음에 오는 <p> 요소 선택. |
element ~ siblings |
$("div ~ p") |
<div> 이후에 위치한 모든 <p> 형제 요소 선택. |
5. 속성 선택자
| Selector |
예제 |
설명 |
[attribute] |
$("[href]") |
href 속성을 가진 모든 요소 선택. |
[attribute=value] |
$("[href='default.htm']") |
href="default.htm"인 요소 선택. |
[attribute!=value] |
$("[href!='default.htm']") |
href가 "default.htm"이 아닌 요소 선택. |
[attribute^=value] |
$("[title^='Tom']") |
title이 "Tom"으로 시작하는 요소 선택. |
[attribute$=value] |
$("[href$='.jpg']") |
href이 ".jpg"으로 끝나는 요소 선택. |
[attribute*=value] |
$("[title*='hello']") |
title에 "hello"를 포함하는 요소 선택. |
6. 콘텐츠 및 상태 기반 선택자
| Selector |
예제 |
설명 |
:contains(text) |
$(":contains('Hello')") |
텍스트 "Hello"를 포함하는 요소 선택. |
:empty |
$(":empty") |
자식 요소가 없는 모든 요소 선택. |
:hidden |
$(":hidden") |
숨겨진 요소 선택. |
:visible |
$(":visible") |
보이는 요소 선택. |
:focus |
$(":focus") |
현재 포커스된 요소 선택. |
:parent |
$(":parent") |
자식 요소가 있는 모든 부모 요소 선택. |
7. 입력 요소 선택자
| Selector |
예제 |
설명 |
:input |
$(":input") |
모든 입력 요소(<input>, <textarea> 등). |
:text |
$(":text") |
type="text"인 모든 입력 요소. |
:password |
$(":password") |
type="password"인 모든 입력 요소. |
:radio |
$(":radio") |
type="radio"인 모든 입력 요소. |
:checkbox |
$(":checkbox") |
type="checkbox"인 모든 입력 요소. |
:submit |
$(":submit") |
type="submit"인 모든 버튼. |
:reset |
$(":reset") |
type="reset"인 모든 버튼. |
:button |
$(":button") |
type="button"인 모든 버튼. |
:enabled |
$(":enabled") |
활성화된 입력 요소. |
:disabled |
$(":disabled") |
비활성화된 입력 요소. |
:checked |
$(":checked") |
선택된 체크박스 또는 라디오 버튼. |
:selected |
$(":selected") |
선택된 <option> 요소. |
요약
jQuery 선택자는 다양한 요소를 쉽게 선택할 수 있도록 지원하며, 기본 선택자, 구조 기반, 계층 구조, 상태, 속성 선택자 등을 통해 강력한 DOM 조작 기능을 제공한다. 프로젝트의 요구에 따라 적합한 선택자를 사용하면 효율적인 코드를 작성할 수 있다.