jquery
jQuery 제이쿼리 선택자란 jQuery 라이브러리에서 제공하는 기능으로, 웹 페이지 내의 HTML 요소들을 선택하기 위한 패턴입니다. 이를 사용하여 특정 요소를 식별하고, 그 요소에 대해 다양한 작업(스타일 변경, 텍스트 수정, 이벤트 핸들링 등)을 수행할 수 있습니다.
| 선택자 | 예제 | 설명 |
|---|---|---|
| 요소 선택자 | $(‘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 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.
컴포넌트 스캔이란? 컴포넌트 스캔(Component Scan)은 스프링 프레임워크가 특정 패키지를 탐색하면서, 스캔 대상에 해당하는 클래스를 찾아…
스프링 빈이란? 스프링 빈(Spring Bean)은 스프링 IoC(Inversion of Control) 컨테이너가 관리하는 자바 객체를 의미합니다. 간단히…
스프링 컨테이너(Spring Container)란? 스프링 컨테이너는 스프링 프레임워크에서 가장 핵심적인 부분으로, IoC(Inversion of Control) 개념을 기반으로…
Queue란 무엇인가? Java에서 Queue는 데이터 구조의 일종으로, 데이터를 선입선출(FIFO, First-In-First-Out) 방식으로 처리합니다. 이 글에서는 Queue의…
Stack이란 무엇인가? Java에서 Stack은 자료구조의 한 종류로, 데이터를 순서대로 쌓아 올리는 형태로 운영됩니다. 컴퓨터 과학에서…
소개 자바에서 Map 인터페이스는 키(Key)와 값(Value)의 쌍을 저장하는 자료구조입니다. 이는 연관 배열이라고도 불리며, 각 키는…