English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
jQuery 선택자는 HTML 요소를 선택하고操作할 수 있게 합니다.
이 장은 최신 jQuery JavaScript 라이브러리에 포함된 선택자의 전체 목록을 포함하고 있습니다.
모든 선택자는 몇 가지 유형으로 나뉩니다.
| 선택자 | 예 | 설명 |
|---|---|---|
| * | $("*") | 모든 요소 선택(일반 선택자) |
| #id | $("#demo") | id="demo"를 가진 요소 선택 |
| .class | $(".demo") | 모든 class="demo"를 가진 요소 선택 |
| 요소 | $("p") | 모든 p 요소 선택 |
| selector1, selector2 | $("p, div") | 모든 p 요소와 모든 div 요소 선택 |
| 선택자 | 예 | 설명 |
|---|---|---|
| ancestor descendant | $("div p") | div 요소 내부의 모든 p 요소 선택 |
| parent > child | $("div > p") | 모든 p 요소 중 부모 요소가 div 요소인 것 선택 |
| prev + next | $("div" + p") | div 요소 뒤에紧接着的所有 p 요소 선택 |
| prev ~ siblings | $("div ~ p") | div 요소와 동일한 계층의 모든 p 요소 선택 |
| 선택자 | 예 | 설명 |
|---|---|---|
| [attribute] | $("[target]") | target 속성을 가진 모든 요소 선택 |
| [attribute=value] | $("a[href=&#"39;CSS3']) | 선택할 모든 href 속성 값이 "CSS"인 a 요소3"의 <a> 요소 |
| [attribute!=value] | $("a[href!=&#"39;CSS3']) | href 속성 값이 " CSS"에 달라지지 않는 모든 요소 선택3"의 <a> 요소 |
| [attribute~=value] | $('[alt~=Parrot]') | alt 속성이 있고 " Parrot" 단어를 포함하는 모든 요소 선택 |
| [attribute|=value] | $('[lang|=en]') | lang 속성 값이 " en"로 시작하는 모든 요소 선택 |
| [attribute^=value] | $('a[href^=https]') | href 속성 값이 " https"로 시작하는 모든 <a> 요소 선택 |
| [attribute$=value] | $('a[href$='.org']) | href 속성 값이 " .org"로 끝나는 각 <a> 요소 선택 |
| [attribute*=value] | $('a[href'*=example]) | href 속성 값에 "example" 문자열이 포함된 각 <a> 요소 선택 |
| 선택자 | 예 | 설명 |
|---|---|---|
| :first | $('p:first') | 첫 번째 <p> 요소 선택 |
| :last | $('p:last') | 마지막 <p> 요소 선택 |
| :even | $('tr:even') | 모든 짝수 <tr> 요소 선택，인덱스는 0 |
| :odd | $('tr:odd') | 인덱스가 0인 모든奇수 <tr> 요소 선택 |
| :not() | $('p:not(.demo)') | class="demo"를 가진 요소를 제외한 모든 <p> 요소 선택 |
| :eq() | $('tr:eq('2)") | 일치하는 집합에서 인덱스는 0에서 시작하여 세 번째 <tr> 요소 선택 |
| :lt() | $('tr:lt('5)") | 인덱스 번호가 작은 모든 <tr> 선택5의 <tr> 요소, 인덱스는 0에서 시작 |
| :gt() | $('tr:gt('5)") | 인덱스 번호가 더 큰 모든 <tr> 선택5의 <tr> 요소, 인덱스는 0에서 시작 |
| :header | $(':header') | 모든 헤더 요소 선택，예를 들어 <h1>，《h2>，《h3> 등 |
| :lang() | $('div:lang(en)') | 언어 값이 "en"인 모든 <div> 요소 선택, 즉 lang="en", lang="en-us" 등 |
| :root | $(':root') | 문서의 루트 요소 선택, 항상 <html> 요소 |
| :animated | $(':animated') | 선택자가 선택자를 실행할 때 모든 애니메이션 요소 선택 |
| 선택자 | 예 | 설명 |
|---|---|---|
| :first-child | $("p:first-child) | 부모 요소의 첫 번째 자식 요소에 속한 모든 <p> 요소 선택 |
| :last-child | $("p:last-child) | 부모 요소의 마지막 자식 요소에 속한 모든 <p> 요소 선택 |
| :only-child | $("p:only-child) | 부모 요소의 유일한 자식 요소에 속하는 모든 <p> 요소를 선택합니다 |
| :first-of-type | $("p:first-of-type) | 부모 요소의 첫 번째 <p> 요소에 속하는 모든 <p> 요소를 선택합니다 |
| :last-of-type | $("p:last-of-type) | 부모 요소의 마지막 <p> 요소에 속하는 모든 <p> 요소를 선택합니다 |
| :only-of-type | $("p:only-of-type) | 동일한 요소 이름을 가진 동급 요소가 없고 같은 요소 이름을 가진 모든 <p> 요소를 선택합니다 |
| :nth-child(n) | $("p:nth-child(3)") | 부모 요소의 세 번째 자식 요소에 속하는 모든 <p> 요소를 선택합니다 |
| :nth-last-child(n) | $("p:nth-last-child(4)") | 부모 요소의 네 번째 자식 요소인 모든 <p> 요소에서上一个 요소부터 첫 번째 요소까지 선택합니다 |
| :nth-of-type(n) | $("span:nth-of-type(3)") | 부모 요소의 세 번째 <span> 요소에 속하는 모든 <span> 요소를 선택합니다 |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | 부모 요소에 속하는4마지막 <span> 요소부터 첫 번째 요소까지 카운팅하는 모든 <span> 요소 |
| 선택자 | 예 | 설명 |
|---|---|---|
| :contains() | $("p:contains('is')") | 텍스트가 "is"인 모든 <p> 요소를 선택합니다 |
| :empty | $(":empty") | 자식 요소가 없는 모든 요소(텍스트 포함)를 선택합니다 |
| :has() | $("p:has(span)") | 최소한 하나의 <span> 요소를 포함하는 모든 <p> 요소를 선택합니다 |
| :parent | $(":parent") | 최소한 하나의 자식 노드를 가진 모든 요소(요소 또는 텍스트)를 선택합니다 |
| 선택자 | 예 | 설명 |
|---|---|---|
| :input | $(":input") | 모든 입력, 텍스트 영역, 선택 및 버튼 요소를 선택합니다 |
| :text | $(":text") | 타입이 "text"인 모든 입력 요소를 선택합니다 |
| :password | $(":password") | 타입이 "password"인 모든 입력 요소를 선택합니다 |
| :radio | $(":radio") | 모든 타입이 "radio"인 입력 요소를 선택합니다 |
| :checkbox | $(":checkbox") | 모든 타입이 "checkbox"인 입력 요소를 선택합니다 |
| :button | $(":button") | 모든 타입이 "button"인 입력 및 버튼 요소를 선택합니다 |
| :submit | $(":submit") | 모든 입력 및 버튼 요소의 타입이 "submit"인 것을 선택합니다 |
| :reset | $(":reset") | type="reset"의 모든 입력 및 버튼 요소 선택 |
| :image | $(":image") | type="image"의 모든 입력 요소 선택 |
| :file | $(":file") | type="file"의 모든 입력 요소 선택 |
| :enabled | $(":enabled") | 사용 가능한 요소 선택 |
| :disabled | :disabled | 불가능한 요소 선택 |
| :selected | $(":selected") | 선택된 요소 선택, <option> 요소에만 적용 |
| :checked | $(":checked") | 선택된 요소 선택 또는 선택된 요소, 체크박스, 라디오 버튼 및 선택 요소에 적용 |
| :focus | $(":focus") | 현재 포커스 상태의 요소 선택 |
| 선택자 | 예 | 설명 |
|---|---|---|
| :hidden | $("p:hidden") | 모든 숨겨진 <p> 요소 선택 |
| :visible | $("p:visible") | 모든 보이는 <p> 요소 선택 |