jQuery 선택자에 대해 알아보자!
jQuery
jQuery는 웹사이트를 더 쉽게, 더 효율적으로 그리고 더 빠르게 만들 수 있게 해주는 자바스크립트 라이브러리입니다.
웹 개발을 할 때 자주 사용되는 DOM(Document Object Model) 조작, 이벤트 처리, 애니메이션과 Ajax 통신 등을 간단한 API로 제공하여 개발자가 더 적은 코드로 더 많은 작업을 할 수 있도록 돕습니다.
jQuery 선택자란?
📣 jQuery 선택자 는 HTML 문서에서 요소(element), 속성(attribute), CSS 클래스(class) 등을 찾기 위해 사용됩니다.
CSS 선택자의 구문을 사용하여 요소를 선택하고, 그 선택된 요소들에 대해 jQuery의 다양한 함수를 적용할 수 있습니다.
jQuery 선택자의 사용은 $() 함수 안에 선택자를 문자열로 전달함으로써 이루어집니다.
기본 선택자
📣 기본 선택자 는 웹 페이지 내의 요소들을 선택하는 가장 단순한 형태의 선택자입니다.
jQuery에서 기본 선택자를 사용하여 특정 태그, ID, 또는 클래스를 가진 요소들을 쉽게 찾을 수 있습니다.
이러한 선택자는 웹 페이지에서 요소들을 조작하기 위한 기본적인 출발점을 제공합니다.
| 선택자 종류 | 설명 | 코드 예제 |
|---|---|---|
| 태그 선택자 | 특정 태그 이름을 가진 모든 요소를 선택합니다. | $("p") - 모든 <p> 요소 선택 |
| ID 선택자 | 주어진 ID를 가진 단일 요소를 선택합니다. | $("#unique") - ID가 unique인 요소 선택 |
| 클래스 선택자 | 주어진 클래스를 가진 모든 요소를 선택합니다. | $(".classy") - 클래스가 classy인 모든 요소 선택 |
| 자식 선택자 | 주어진 부모 요소의 직접적인 자식만을 선택합니다. | $("ul > li") - 모든 <ul>의 직접적인 <li> 자식 요소 선택 |
| 하위 선택자 | 주어진 조상 요소의 모든 하위 요소를 선택합니다. | $("div p") - <div> 내의 모든 <p> 요소 선택 |
| 인접 선택자 | 특정 요소 바로 다음에 오는 형제 요소 하나만을 선택합니다. | $("h2 + p") - 각 <h2> 요소 바로 다음에 오는 <p> 요소 선택 |
| 종속 선택자 | 특정 요소의 모든 형제 요소를 선택합니다. | $("h2 ~ p") - <h2>와 같은 레벨에 있는 모든 <p> 요소 선택 |
| 그룹 선택자 | 여러 선택자를 콤마로 구분하여 그룹화한 후, 해당하는 모든 요소를 선택합니다. | $("h1, h2, h3") - 모든 <h1>, <h2>, <h3> 요소 선택 |
| 전체 선택자 | 문서의 모든 요소를 선택합니다. | $("*") - 문서의 모든 요소 선택 |
속성 선택자
📣 속성 선택자 는 HTML 요소의 특정 속성을 기반으로 요소를 선택하는 방법을 제공합니다.
jQuery에서 속성 선택자를 사용하면 속성의 존재 여부, 속성의 값, 속성 값의 일부분 등에 따라 요소를 선택할 수 있습니다.
이를 통해 더 세밀한 요소 선택이 가능해져, 웹 개발에서 다양한 시나리오에 대응할 수 있습니다.
| 선택자 | 설명 | 코드 예제 |
|---|---|---|
요소[속성] | 해당 속성을 가진 모든 요소를 선택합니다. | $('input[type]') - 모든 <input> 요소 중 type 속성을 가진 요소 선택 |
요소[속성='값'] | 해당 속성의 값이 정확히 ‘값’인 모든 요소를 선택합니다. | $('input[type="checkbox"]') - type 속성 값이 "checkbox"인 모든 <input> 요소 선택 |
요소[속성!='값'] | 해당 속성의 값이 ‘값’이 아닌 모든 요소를 선택합니다. | $('input[type!="submit"]') - type 속성 값이 "submit"이 아닌 모든 <input> 요소 선택 |
요소[속성~='값'] | 해당 속성의 값이 단어 리스트 중 ‘값’을 포함하는 모든 요소를 선택합니다. | $('input[name~="name"]') - name 속성 값에 "name"이라는 단어를 포함한 모든 <input> 요소 선택 |
요소[속성*='값'] | 해당 속성의 값에 ‘값’을 포함하는 모든 요소를 선택합니다. | $('input[name*="name"]') - name 속성 값에 "name"을 포함하는 모든 <input> 요소 선택 |
요소[속성|='값'] | 해당 속성의 값이 정확히 ‘값’이거나 ‘값-‘로 시작하는 모든 요소를 선택합니다. | $('a[hreflang|="en"]') - hreflang 속성 값이 "en" 또는 "en-"로 시작하는 모든 <a> 요소 선택 |
요소[속성^='값'] | 해당 속성의 값이 ‘값’으로 시작하는 모든 요소를 선택합니다. | $('a[href^="https://"]') - href 속성 값이 "https://"로 시작하는 모든 <a> 요소 선택 |
요소[속성$='값'] | 해당 속성의 값이 ‘값’으로 끝나는 모든 요소를 선택합니다. | $('a[href$=".pdf"]') - href 속성 값이 .pdf로 끝나는 모든 <a> 요소 선택 |
필터 선택자
📣 필터 선택자 는 jQuery에서 특정 조건을 만족하는 요소들 중에서 추가적인 필터링을 통해 세부적인 요소를 선택할 수 있게 해주는 선택자입니다.
이러한 선택자들은 기존에 선택된 요소들의 집합에서 특정 요소들만을 추출하거나 제외하는 데 사용됩니다.
필터 선택자는 웹 페이지의 DOM 요소들을 더욱 효율적으로 조작하고 관리할 수 있도록 도와줍니다.
| 선택자 | 코드 사용 예 | 설명 |
|---|---|---|
:even | $("li:even") | 짝수 인덱스(0부터 시작)에 해당하는 모든 요소를 선택합니다. |
:odd | $("li:odd") | 홀수 인덱스에 해당하는 모든 요소를 선택합니다. |
:first | $("li:first") | 선택한 요소들 중 첫 번째 요소만을 선택합니다. |
:last | $("li:last") | 선택한 요소들 중 마지막 요소만을 선택합니다. |
:header | $(":header") | <h1>, <h2> 등과 같은 제목 요소들을 선택합니다. |
:eq(index) | $("li:eq(2)") | 지정된 인덱스(0부터 시작)에 해당하는 단일 요소를 선택합니다. |
:gt(index) | $("li:gt(2)") | 지정된 인덱스보다 큰 인덱스를 가진 모든 요소를 선택합니다. |
:lt(index) | $("li:lt(2)") | 지정된 인덱스보다 작은 인덱스를 가진 모든 요소를 선택합니다. |
:not(selector) | $("li:not(:first)") | 지정된 선택자에 해당하지 않는 모든 요소를 선택합니다. |
:root | $(":root") | 문서의 루트 요소를 선택합니다. 일반적으로 <html> 요소가 해당됩니다. |
:animated | $("div:animated") | 현재 애니메이션 중인 모든 요소를 선택합니다. |
자식 필터 선택자
📣 자식 필터 선택자 는 다른 선택자에 비하여 약간 이해하기 어려울 수 있습니다.
자식 필터 선택자는 jQuery에서 특정 부모 요소의 자식 요소들 중에서 특정 조건을 만족하는 요소를 선택하는 데 사용되는 필터 선택자입니다.
이 선택자들은 부모 요소 내부의 자식 요소들을 대상으로 하며, 특정 위치에 있는 자식이나 특정 조건을 만족하는 자식 요소들을 선택할 수 있게 해줍니다.
| 선택자 | 코드 사용 예 | 설명 |
|---|---|---|
:first-child | $("li:first-child") | 각 부모 요소의 첫 번째 자식 요소를 선택합니다. |
:last-child | $("li:last-child") | 각 부모 요소의 마지막 자식 요소를 선택합니다. |
:first-of-type | $("p:first-of-type") | 각 부모 내에서 해당 타입의 첫 번째 요소를 선택합니다. |
:last-of-type | $("p:last-of-type") | 각 부모 내에서 해당 타입의 마지막 요소를 선택합니다. |
:nth-child(n) | $("li:nth-child(2)") | 부모 요소의 자식 요소들 중 n번째 요소를 선택합니다. n은 1부터 시작합니다. |
:nth-last-child(n) | $("li:nth-last-child(2)") | 부모 요소의 자식 요소들 중 뒤에서 n번째 요소를 선택합니다. |
:nth-of-type(n) | $("p:nth-of-type(2)") | 각 부모 내에서 해당 타입의 n번째 요소를 선택합니다. n은 1부터 시작합니다. |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 각 부모 내에서 해당 타입의 뒤에서 n번째 요소를 선택합니다. |
:only-child | $("li:only-child") | 부모 요소의 유일한 자식 요소를 선택합니다. |
:only-of-type | $("p:only-of-type") | 부모 요소 내에서 해당 타입의 유일한 요소를 선택합니다. |
콘텐츠필터 선택자
📣 콘텐츠 필터 선택자는 특정 콘텐츠를 기반으로 요소를 선택하는 데 사용되며, 요소가 특정 텍스트를 포함하고 있는지, 비어 있는지, 부모 요소를 가지고 있는지, 또는 특정 자식 요소를 포함하고 있는지 등의 조건으로 요소를 필터링합니다
| 선택자 | 코드 사용 예 | 설명 |
|---|---|---|
:contains() | $("p:contains('text')") | 특정 텍스트를 포함하는 모든 요소를 선택합니다. 예를 들어, 텍스트 ‘text’를 포함하는 모든 <p> 요소를 선택합니다. |
:empty | $("div:empty") | 자식(텍스트 노드나 요소 노드 모두 포함)이 없는 모든 요소를 선택합니다. 예를 들어, 비어 있는 모든 <div> 요소를 선택합니다. |
:parent | $("div:parent") | 하나 이상의 자식을 가진 요소를 선택합니다. 예를 들어, 자식을 가진 모든 <div> 요소를 선택합니다. |
:has() | $("div:has(p)") | 특정 요소를 포함하는 모든 요소를 선택합니다. 예를 들어, 하나 이상의 <p> 요소를 포함하는 모든 <div> 요소를 선택합니다. |
폼 필터 선택자
📣 폼 필터 선택자는 jQuery에서 폼 요소를 선택할 때 사용하는 특별한 종류의 선택자입니다.
이 선택자들은 특정 유형의 입력 필드(예: 텍스트, 체크박스, 라디오 버튼 등), 상태(예: 선택됨, 체크됨, 활성화됨, 비활성화됨 등) 또는 특정 조건(예: 포커스된 요소)을 기준으로 폼 요소를 필터링하여 선택할 수 있게 해줍니다.
| 선택자 | 코드 사용 예 | 설명 |
|---|---|---|
:text | $("input:text") | type="text" 속성을 가진 모든 <input> 요소를 선택합니다. |
:password | $("input:password") | type="password" 속성을 가진 모든 <input> 요소를 선택합니다. |
:image | $("input:image") | type="image" 속성을 가진 모든 <input> 요소를 선택합니다. |
:file | $("input:file") | type="file" 속성을 가진 모든 <input> 요소를 선택합니다. |
:button | $("button, input:button") | <button> 요소와 type="button" 속성을 가진 <input> 요소를 모두 선택합니다. |
:checkbox | $("input:checkbox") | type="checkbox" 속성을 가진 모든 <input> 요소를 선택합니다. |
:radio | $("input:radio") | type="radio" 속성을 가진 모든 <input> 요소를 선택합니다. |
:submit | $("input:submit") | type="submit" 속성을 가진 모든 <input> 요소를 선택합니다. |
:reset | $("input:reset") | type="reset" 속성을 가진 모든 <input> 요소를 선택합니다. |
:input | $(":input") | 모든 <input>, <textarea>, <select>, 그리고 <button> 요소를 선택합니다. |
:checked | $("input:checked") | checked 속성을 가진 모든 체크박스(<input type="checkbox">) 또는 라디오 버튼(<input type="radio">)을 선택합니다. |
:selected | $("option:selected") | <select> 내에서 선택된 모든 <option> 요소를 선택합니다. |
:focus | $(":focus") | 현재 포커스를 가진 요소를 선택합니다. |
:disabled | $(":disabled") | 비활성화된 모든 폼 요소를 선택합니다. |
:enabled | $(":enabled") | 활성화된 모든 폼 요소를 선택합니다. |
가시성 필터 선택자
📣 가시성 필터 선택자 는 요소의 가시성 상태를 기준으로 요소를 선택하는 데 사용되는 jQuery 선택자입니다.
:hidden과 :visible은 이러한 가시성 필터 선택자의 대표적인 예입니다. 이 선택자들을 사용하여 페이지 내에서 보이는 요소 또는 숨겨진 요소를 쉽게 찾아낼 수 있습니다.
| 선택자 | 코드 사용 예 | 설명 |
|---|---|---|
:hidden | $("div:hidden") | 화면에 보이지 않는 모든 <div> 요소를 선택합니다. 요소가 CSS로 숨겨져 있거나 display: none이 설정되어 있을 때 해당됩니다. |
:visible | $("div:visible") | 화면에 보이는 모든 <div> 요소를 선택합니다. 요소가 화면에 실제로 렌더링되어 있고 사용자에게 보이는 경우에 해당됩니다. |
탐색 선택자
기본 탐색 선택자
📣 기본 탐색 선택자는 jQuery에서 문서 객체 모델(DOM)을 통해 요소들을 탐색할 때 사용하는 선택자의 일종입니다.
이 선택자들은 특정 요소를 시작점으로 하여 부모, 자식, 형제 등 관계에 있는 다른 요소들을 선택하는 데 사용됩니다.
기본 탐색 선택자를 사용함으로써, 웹 페이지 내에서 요소들 간의 관계를 기반으로 효과적이고 효율적으로 원하는 요소를 찾을 수 있습니다.
| 메서드 | 코드 사용 예 | 설명 |
|---|---|---|
children() | $(element).children(selector) | 지정된 요소의 직접적인 자식 요소들만을 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
parent() | $(element).parent(selector) | 지정된 요소의 부모 요소를 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
parents() | $(element).parents(selector) | 지정된 요소의 모든 조상 요소들을 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
closest() | $(element).closest(selector) | 지정된 요소 자신 또는 조상 중에서 가장 가까운 요소를 선택자로 필터링하여 선택합니다. |
next() | $(element).next(selector) | 지정된 요소의 바로 다음 형제 요소를 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
nextAll() | $(element).nextAll(selector) | 지정된 요소의 모든 다음 형제 요소들을 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
nextUntil() | $(element).nextUntil(selector) | 지정된 요소부터 다른 요소까지의 모든 다음 형제 요소들을, 끝 요소를 제외하고 선택합니다. |
prev() | $(element).prev(selector) | 지정된 요소의 바로 이전 형제 요소를 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
prevAll() | $(element).prevAll(selector) | 지정된 요소의 모든 이전 형제 요소들을 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
prevUntil() | $(element).prevUntil(selector) | 지정된 요소부터 다른 요소까지의 모든 이전 형제 요소들을, 끝 요소를 제외하고 선택합니다. |
siblings() | $(element).siblings(selector) | 지정된 요소의 모든 형제 요소들을 선택합니다. 선택적으로 선택자를 사용하여 필터링할 수 있습니다. |
find() | $(element).find(selector) | 지정된 요소의 후손 중에서 선택자에 해당하는 요소들을 선택합니다. |
filter() | $(element).filter(selector) | 지정된 요소들 중에서 선택자에 해당하는 요소들만을 필터링하여 선택합니다. |
not() | $(element).not(selector) | 지정된 요소들 중에서 선택자에 해당하지 않는 요소들만을 필터링하여 선택합니다. |
has() | $(element).has(selector) | 자신의 후손 중에서 선택자에 해당하는 요소를 가진 모든 요소를 선택합니다. |
eq() | $(element).eq(index) | 지정된 인덱스에 해당하는 단일 요소를 선택합니다. 인덱스는 0부터 시작합니다. |
gt() | $(element).gt(index) | 지정된 인덱스보다 큰 인덱스를 가진 모든 요소를 선택합니다. |
lt() | $(element).lt(index) | 지정된 인덱스보다 작은 인덱스를 가진 모든 요소를 선택합니다. |
기타 탐색 선택자
📣 기타 탐색 선택자 는 CSS에서 사용되며, 요소 간의 관계를 기반으로 선택합니다. +는 바로 뒤에 오는 형제 요소를, ~는 모든 뒤에 오는 형제 요소를 선택하며, >는 특정 요소의 자식 요소를 선택합니다.
이 선택자들을 활용하면 웹 페이지의 요소를 보다 효과적으로 선택하여 스타일링할 수 있습니다.
| 메서드 | 코드 사용 예 | 설명 |
|---|---|---|
add() | $(selector).add(other) | 현재 jQuery 객체에 다른 요소나 jQuery 객체를 추가합니다. 이를 통해 선택된 요소의 집합을 확장할 수 있습니다. |
addBack() | $(selector).find(filter).addBack() | find() 메서드 등을 통해 선택된 요소들에 대한 탐색 후, 탐색을 시작한 요소를 현재 집합에 다시 추가합니다. |
end() | $(selector).find(filter).end() | 이전의 상태로 돌아갑니다. 예를 들어, find() 메서드로 선택된 요소들 이후에 원래 선택된 요소들로 돌아가고 싶을 때 사용합니다. |
is() | $(selector).is(filter) | 현재 선택된 요소가 특정 조건에 맞는지를 검사합니다. 조건에 맞으면 true, 그렇지 않으면 false를 반환합니다. |