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 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.
Enum이란? Enum은 "enumeration"의 줄임말로, 특정 값들의 집합을 정의할 수 있는 특별한 클래스입니다. 예를 들어, 요일,…
래퍼 클래스(Wrapper Class)란? 자바에서 래퍼 클래스는 기본 데이터 타입(Primitive Data Type)을 객체(Object)로 감싸는 클래스입니다. 자바의…
서론 Java에서 문자열을 다룰 때, 문자열의 변경이 빈번하게 발생하는 경우라면 StringBuilder 클래스를 사용하는 것이 매우…
String 클래스란? 자바에서 String 클래스는 가장 널리 사용되는 클래스 중 하나입니다. 문자열 시퀀스를 나타내며, 문자열을…
불변 객체란? 불변 객체(Immutable Object)는 생성된 이후 그 상태를 변경할 수 없는 객체를 의미합니다. 불변…