jQuery 제이쿼리 선택자란 jQuery 라이브러리에서 제공하는 기능으로, 웹 페이지 내의 HTML 요소들을 선택하기 위한 패턴입니다. 이를 사용하여 특정 요소를 식별하고, 그 요소에 대해 다양한 작업(스타일 변경, 텍스트 수정, 이벤트 핸들링 등)을 수행할 수 있습니다.
jQuery 선택자 종류
기본 선택자
요소 선택자: 특정 태그를 가진 모든 요소를 선택합니다. 예: $(‘p’)는 모든 요소를 선택합니다.
ID 선택자: 특정 ID를 가진 요소를 선택합니다. 예: $(‘#myId’)는 ID가 myId인 요소를 선택합니다.
클래스 선택자: 특정 클래스를 가진 모든 요소를 선택합니다. 예: $(‘.myClass’)는 클래스가 myClass인 모든 요소를 선택합니다.
계층 선택자
자식 선택자 (parent > child): 특정 부모의 직접적인 자식 요소만을 선택합니다.
후손 선택자 (ancestor descendant): 특정 조상의 모든 후손 요소를 선택합니다.
인접 형제 선택자 (prev + next): 특정 요소의 바로 다음에 위치하는 형제 요소를 선택합니다.
일반 형제 선택자 (prev ~ siblings): 특정 요소의 모든 뒤에 위치하는 형제 요소들을 선택합니
다.
부모 선택자
.parent(): 특정 요소의 직접적인 부모 요소만을 선택합니다.
.parents(): 특정 요소의 모든 상위 조상 요소를 선택합니다.
.closest(selector): 특정 요소 자신 또는 가장 가까운 상위 조상 요소 중 지정된 선택자에 일치하는 요소를 찾습니다.
.parent(selector): 특정 조건을 만족하는 직접적인 부모 요소를 선택합니다.
자식 선택자
.children(selector): 특정 부모 요소의 모든 직접적인 자식 요소를 선택합니다. 선택자를 사용하여 특정 자식 요소를 필터링할 수도 있습니다.
.find(selector): 특정 요소의 모든 후손 요소 중 지정된 선택자에 일치하는 요소를 찾습니다.
형제 선택자
.siblings(selector): 특정 요소의 모든 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
.next(selector): 특정 요소의 바로 다음 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
.prev(selector): 특정 요소의 바로 이전 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
속성 선택자
[attribute]: 특정 속성을 가진 모든 요소를 선택합니다.
[attribute=value]: 특정 속성을 가지며 그 값이 특정 값과 일치하는 모든 요소를 선택합니다.
[attribute^=value]: 특정 속성의 값이 특정 값으로 시작하는 모든 요소를 선택합니다.
[attribute$=value]: 특정 속성의 값이 특정 값으로 끝나는 모든 요소를 선택합니다.
[attribute*=value]: 특정 속성의 값이 특정 값을 포함하는 모든 요소를 선택합니다.
필터 선택자
:first: 각 그룹의 첫 번째 요소를 선택합니다.
:last: 각 그룹의 마지막 요소를 선택합니다.
:not(selector): 특정 선택자와 일치하지 않는 모든 요소를 선택합니다.
:even: 짝수 번째 요소를 선택합니다.
:odd: 홀수 번째 요소를 선택합니다.
:eq(index): 특정 인덱스에 위치한 요소를 선택합니다.
:gt(index): 특정 인덱스보다 큰 인덱스를 가진 요소를 선택합니다.
:lt(index): 특정 인덱스보다 작은 인덱스를 가진 요소를 선택합니다.
:header: <h1>, <h2> 같은 헤더 요소들을 선택합니다.
:animated: 현재 애니메이션 중인 요소를 선택합니다.
폼 선택자
:input: 모든 <input>, <textarea>, <select>, <button> 요소를 선택합니다.
:text: 모든 텍스트 입력 필드를 선택합니다.
:password: 모든 패스워드 입력 필드를 선택합니다.
:radio: 모든 라디오 버튼을 선택합니다.
:checkbox: 모든 체크박스를 선택합니다.
:submit: 모든 제출 버튼을 선택합니다.
:reset: 모든 리셋 버튼을 선택합니다.
:button: 모든 <button>요소와 타입이 버튼인 <input>요소를 선택합니다.
:image: 모든 이미지 버튼 (<input type=”image”>)을 선택합니다.
:file: 모든 파일 선택 필드를 선택합니다.
:selected: 모든 선택된 옵션 요소를 선택합니다.
:enabled: 활성화된 모든 폼 요소를 선택합니다.
:disabled: 비활성화된 모든 폼 요소를 선택합니다.
:checked: 체크되거나 선택된 폼 요소를 선택합니다.
jQuery 선택자 표와 예제
기본 선택자
선택자
예제
설명
요소 선택자
$(‘p’)
모든 <p>요소를 선택합니다.
ID 선택자
$(‘#myId’)
ID가 myId인 요소를 선택합니다.
클래스 선택자
$(‘.myClass’)
클래스가 myClass인 모든 요소를 선택합니다.
계층 선택자
선택자
예제
설명
자식 선택자
$(‘ul > li’)
특정 부모의 직접적인 자식 요소만을 선택합니다.
후손 선택자
$(‘div p’)
특정 조상의 모든 후손 요소를 선택합니다.
인접 형제 선택자
$(‘h1 + h2’)
특정 요소의 바로 다음에 위치하는 형제 요소를 선택합니다.
일반 형제 선택자
$(‘h1 ~ p’)
특정 요소의 모든 뒤에 위치하는 형제 요소들을 선택합니다.
부모 선택자
선택자
예제
설명
.parent()
$(‘li’).parent()
<li> 요소의 직접적인 부모 요소를 선택합니다.
.parents()
$(‘li’).parents()
<li> 요소의 모든 상위 조상 요소들을 선택합니다.
.closest(selector)
$(‘li’).closest(‘div’)
<li> 요소 자신 또는 그 상위에 있는 가장 가까운 <div> 요소를 선택합니다.
.parent(selector)
$(‘li’).parent(‘.list’)
<li> 요소의 직접적인 부모 중 클래스가 list인 요소를 선택합니다.
자식 선택자
선택자
예제
설명
.children(selector)
$(‘ul’).children(‘li’)
<ul>의 모든 직접적인 <li> 자식 요소를 선택합니다. 선택자를 사용하여 특정 자식 요소를 필터링할 수도 있습니다.
.find(selector)
$(‘div’).find(‘p’)
<div> 내의 모든 <p> 후손 요소를 선택합니다. 선택자를 사용하여 특정 후손 요소를 필터링할 수도 있습니다.
형제 선택자
선택자
예제
설명
.siblings(selector)
$(‘li’).siblings()
<li> 요소의 모든 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
.next(selector)
$(‘li’).next()
<li> 요소 바로 다음에 오는 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
.prev(selector)
$(‘li’).prev()
<li> 요소 바로 이전에 오는 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
속성 선택자
선택자
예제
설명
[attribute]
$(‘[href]’)
href 속성을 가진 모든 요소를 선택합니다.
[attribute=value]
$(‘[type=”text”]’)
type=”text” 속성/값을 가진 모든 요소를 선택합니다.
[attribute^=value]
$(‘[name^=”user”]’)
name 속성 값이 “user”로 시작하는 모든 요소를 선택합니다.
[attribute$=value]
$(‘[name$=”name”]’)
name 속성 값이 “name”으로 끝나는 모든 요소를 선택합니다.
[attribute*=value]
$(‘[name*=”name”]’)
name 속성 값에 “name”을 포함하는 모든 요소를 선택합니다.
필터 선택자
선택자
예제
설명
:first
$(‘li:first’)
각 그룹의 첫 번째 요소를 선택합니다.
:last
$(‘li:last’)
각 그룹의 마지막 요소를 선택합니다.
:not(selector)
$(‘input:not(:checked)’)
:checked에 해당하지 않는 모든 input 요소를 선택합니다.
:even
$(‘tr:even’)
짝수 번째 tr 요소를 선택합니다.
:odd
$(‘tr:odd’)
홀수 번째 tr 요소를 선택합니다.
:eq(index)
$(‘li:eq(3)’)
인덱스가 3인 요소를 선택합니다.
:gt(index)
$(‘li:gt(3)’)
인덱스가 3보다 큰 요소를 선택합니다.
:lt(index)
$(‘li:lt(3)’)
인덱스가 3보다 작은 요소를 선택합니다.
:header
$(‘:header’)
모든 헤더(<h1>, <h2>, …) 요소를 선택합니다.
:animated
$(‘:animated’)
현재 애니메이션 중인 모든 요소를 선택합니다.
폼 선택자
선택자
예제
설명
:input
$(‘:input’)
모든 <input>, <textarea>, <select>, <button> 요소를 선택합니다.
:text
$(‘:text’)
모든 텍스트 입력 필드를 선택합니다.
:password
$(‘:password’)
모든 패스워드 입력 필드를 선택합니다.
:radio
$(‘:radio’)
모든 라디오 버튼을 선택합니다.
:checkbox
$(‘:checkbox’)
모든 체크박스를 선택합니다.
:submit
$(‘:submit’)
모든 제출 버튼을 선택합니다.
:reset
$(‘:reset’)
모든 리셋 버튼을 선택합니다.
:button
$(‘:button’)
모든 <button> 요소와 타입이 버튼인 <input> 요소를 선택합니다.
:image
$(‘:image’)
모든 이미지 버튼(<input type=”image”>)을 선택합니다.
:file
$(‘:file’)
모든 파일 선택 필드를 선택합니다.
:selected
$(‘:selected’)
모든 선택된 옵션 요소를 선택합니다.
:enabled
$(‘:enabled’)
활성화된 모든 폼 요소를 선택합니다.
:disabled
$(‘:disabled’)
비활성화된 모든 폼 요소를 선택합니다.
:checked
$(‘:checked’)
체크되거나 선택된 폼 요소를 선택합니다.
결론
jQuery 선택자는 웹 페이지 내의 다양한 HTML 요소들을 효율적이고 유연하게 선택할 수 있는 도구입니다. 기본 선택자부터 계층, 부모, 자식, 형제, 속성, 필터, 그리고 폼 선택자에 이르기까지, 다양한 유형의 선택자들은 웹 개발자가 DOM 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.
