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 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.
테스트 시 의존성 주입(Dependency Injection)과 Mockito Spring 애플리케이션을 개발하다 보면, 테스트 코드에서 실제 빈(Bean)을 사용하지…
들어가며 스프링 기반 프로젝트에서 좋은 설계 구조와 테스트 전략은 소프트웨어 품질과 유지보수성에 직결됩니다. 최근 학습한…
들어가며 코드를 작성할 때 종종 "이 로직을 어떻게 단순하고 읽기 쉽게 표현할 수 있을까?" 고민하게…
HTTP 상태코드란 무엇인가? HTTP 상태코드(HTTP Status Code)는 서버가 클라이언트의 요청을 처리한 결과를 수치화된 코드로 나타내는…
HTTP란 무엇인가? HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 주고받기 위해 사용하는 응용 계층 프로토콜입니다. 우리가 브라우저에서…