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 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.
인터넷 네트워크란? "인터넷(Internet)"이라는 단어는 "인터네트워크(Internetwork)"의 줄임말입니다. 즉, 여러 개의 네트워크가 상호 연결되어 전 세계적으로 하나의…
스프링 빈(Spring Bean)과 IoC 컨테이너 스프링 프레임워크의 핵심 철학은 IoC(Inversion of Control) 컨테이너를 통해 객체(빈,…
스프링 빈이란? 스프링 프레임워크에서 "스프링 빈(Bean)"이란, IoC(Inversion of Control) 컨테이너가 직접 관리하는 객체를 말합니다. @Component,…
의존성 주입(Dependency Injection)이란? 프로그램을 개발하다 보면, 여러 클래스나 객체들은 서로 필요한 기능을 사용하기 위해 관계를…
컴포넌트 스캔이란? 컴포넌트 스캔(Component Scan)은 스프링 프레임워크가 특정 패키지를 탐색하면서, 스캔 대상에 해당하는 클래스를 찾아…
스프링 빈이란? 스프링 빈(Spring Bean)은 스프링 IoC(Inversion of Control) 컨테이너가 관리하는 자바 객체를 의미합니다. 간단히…