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 요소들을 쉽게 탐색하고, 조작할 수 있게 해줍니다. 이러한 선택자들을 활용함으로써, 스타일 변경, 텍스트 수정, 이벤트 핸들링 등의 작업을 효과적으로 수행할 수 있으며, 동적인 웹 페이지를 구축할 수 있습니다.
들어가며 소프트웨어가 처리해야 하는 데이터 양이 늘어날수록, 단순히 기능 구현만으로는 성능과 효율을 보장하기 어렵습니다. 특히…
들어가며 소프트웨어를 구현할 때 성능 최적화나 안정성을 높이려면, 단순히 고수준 코드만 신경 쓰는 것을 넘어…
들어가며 소프트웨어가 복잡해질수록, 단순히 알고리즘의 시간복잡도만으로는 모든 문제를 해결할 수 없습니다. 특히 운영체제 수준에서는 다중…
들어가며 복잡한 소프트웨어가 원활히 동작하려면 단순히 코드만 잘 짜는 것으로는 부족합니다. 트랜잭션 처리나 대규모 데이터…
들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…
들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…