Categories: jQuery

jQuery 제이쿼리 선택자 (Selector) 종류 정리

jQuery 선택자란?

jQuery 제이쿼리 선택자란 jQuery 라이브러리에서 제공하는 기능으로, 웹 페이지 내의 HTML 요소들을 선택하기 위한 패턴입니다. 이를 사용하여 특정 요소를 식별하고, 그 요소에 대해 다양한 작업(스타일 변경, 텍스트 수정, 이벤트 핸들링 등)을 수행할 수 있습니다.

jQuery 선택자 종류

  1. 기본 선택자
    • 요소 선택자: 특정 태그를 가진 모든 요소를 선택합니다. 예: $(‘p’)는 모든
      요소를 선택합니다.
    • ID 선택자: 특정 ID를 가진 요소를 선택합니다. 예: $(‘#myId’)는 ID가 myId인 요소를 선택합니다.
    • 클래스 선택자: 특정 클래스를 가진 모든 요소를 선택합니다. 예: $(‘.myClass’)는 클래스가 myClass인 모든 요소를 선택합니다.
  2. 계층 선택자
    • 자식 선택자 (parent > child): 특정 부모의 직접적인 자식 요소만을 선택합니다.
    • 후손 선택자 (ancestor descendant): 특정 조상의 모든 후손 요소를 선택합니다.
    • 인접 형제 선택자 (prev + next): 특정 요소의 바로 다음에 위치하는 형제 요소를 선택합니다.
    • 일반 형제 선택자 (prev ~ siblings): 특정 요소의 모든 뒤에 위치하는 형제 요소들을 선택합니
    • 다.
  3. 부모 선택자
    • .parent(): 특정 요소의 직접적인 부모 요소만을 선택합니다.
    • .parents(): 특정 요소의 모든 상위 조상 요소를 선택합니다.
    • .closest(selector): 특정 요소 자신 또는 가장 가까운 상위 조상 요소 중 지정된 선택자에 일치하는 요소를 찾습니다.
    • .parent(selector): 특정 조건을 만족하는 직접적인 부모 요소를 선택합니다.
  4. 자식 선택자
    • .children(selector): 특정 부모 요소의 모든 직접적인 자식 요소를 선택합니다. 선택자를 사용하여 특정 자식 요소를 필터링할 수도 있습니다.
    • .find(selector): 특정 요소의 모든 후손 요소 중 지정된 선택자에 일치하는 요소를 찾습니다.
  5. 형제 선택자
    • .siblings(selector): 특정 요소의 모든 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
    • .next(selector): 특정 요소의 바로 다음 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
    • .prev(selector): 특정 요소의 바로 이전 형제 요소를 선택합니다. 선택자를 사용하여 특정 형제 요소를 필터링할 수도 있습니다.
  6. 속성 선택자
    • [attribute]: 특정 속성을 가진 모든 요소를 선택합니다.
    • [attribute=value]: 특정 속성을 가지며 그 값이 특정 값과 일치하는 모든 요소를 선택합니다.
    • [attribute^=value]: 특정 속성의 값이 특정 값으로 시작하는 모든 요소를 선택합니다.
    • [attribute$=value]: 특정 속성의 값이 특정 값으로 끝나는 모든 요소를 선택합니다.
    • [attribute*=value]: 특정 속성의 값이 특정 값을 포함하는 모든 요소를 선택합니다.
  7. 필터 선택자
    • :first: 각 그룹의 첫 번째 요소를 선택합니다.
    • :last: 각 그룹의 마지막 요소를 선택합니다.
    • :not(selector): 특정 선택자와 일치하지 않는 모든 요소를 선택합니다.
    • :even: 짝수 번째 요소를 선택합니다.
    • :odd: 홀수 번째 요소를 선택합니다.
    • :eq(index): 특정 인덱스에 위치한 요소를 선택합니다.
    • :gt(index): 특정 인덱스보다 큰 인덱스를 가진 요소를 선택합니다.
    • :lt(index): 특정 인덱스보다 작은 인덱스를 가진 요소를 선택합니다.
    • :header: <h1>, <h2> 같은 헤더 요소들을 선택합니다.
    • :animated: 현재 애니메이션 중인 요소를 선택합니다.
  8. 폼 선택자
    • :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 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

6일 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

7일 ago

웹 서버(Web Server)와 WAS(Web Application Server) 알아보기

서론 현대 웹 애플리케이션 아키텍처에서 웹 서버(Web Server) 와 웹 애플리케이션 서버(WAS, Web Application Server)…

1개월 ago

HTTP 헤더(Header)란 무엇인가?

HTTP 헤더(Header)란? HTTP(Header)는 클라이언트와 서버 간에 교환되는 메타데이터로, 요청(Request)과 응답(Response)에 부가적인 정보를 실어 나르는 역할을…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 후기

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 4주차 회고

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago