다양한 선택자를 통해 jQuery는 웹페이지 상에서 특정 요소를 쉽게 찹고 조작할수 있는 큰 장점을 가지고 있다.
1. jQuery css 선택자
| Selector |
사 용 |
설 명 |
| * (wildcard) |
$("*") |
모든 요소선택 |
| .class (클래스명) |
$(".class") |
지정한 클래스명 가진 요소선택 |
| #id (아이디) |
$("#id") |
지정한 아이디 가진 요소선택 |
| element (태그) |
$("p") |
지정한 태그명의 요소선택 |
| , (콤마 OR) |
$("selector1, selector2, selector3") |
콤마로 지정한 모든 요소들을 한번에 선택 |
| Selector |
사 용 |
설 명 |
| :first-child |
$("div:first-child") |
첫번째 자식인 요소 모두 선택 |
| :first-of-type |
$("div:first-of-type") |
동일한 요소 이름의 형제 중 첫번째 요소 모두 선택 |
| :last-child |
$("div:last-child") |
자식 요소의 마지막 모든 요소 선택 |
| :last-of-type |
$("div:last-of-type") |
동일 name 요소의 형제 중 마지막 요소 선택 |
| :nth-child(n) |
$("div:nth-child(n)") |
부모요소의 n번째 자식인 요소 선택 |
| :nth-of-type(n) |
$("div:nth-of-type(1)") |
부모의 n번째 자식인 모든 요소 선택 |
| :nth-last-child(n) |
$("div:last-child(1)") |
부모 요소의 자식 요소중 끝부터 n번째 요소들을 선택 |
| :nth-last-of-type(n) |
$("div:nth-last-of-type(1)") |
특정 요소의 형제 요소들 중에서 끝부터 n번째 요소 선택 |
| :only-child |
$("div:only-child") |
자식 요소 중에서 유일한 요소 선택 |
| Selector |
설 명 |
| $("div p") |
div요소의 자식 요소중 태그명이 p인 요소 선택 |
| $("div, p") |
div요소와 p요소를 선택 |
| $("div > p") |
div요소의 바로 아래 자식 요소중 태그명 p인 요소 선택 |
| $("div + p") |
div의 형제 요소로 바로 다음에 나오는 요소 p인 요소 선택 |
| $("div ~ p") |
div의 형제 요소로 다음에 나오는 모든 요소 p인 요소 선택 |
| $("div:has(p)") |
태그명이 p인 자손을 하나 이상 가지는 div 요소 선택 |
| $("div.class") |
클래스명 class를 가지는 모든 div 요소 선택 |
| $("div#name") |
id가 name인 div 요소 선택 |
| Selector 속성 |
사 용 |
설 명 |
| [name] |
$("div[name]") |
name 속성이 있는 요소를 선택 |
| [name = 'value'] |
$("div[name='value']") |
name 속성의 값이 value인 요소 선택 |
| [name != 'value'] |
$("div[name != 'value']") |
name 속성의 값이 value가 아닌 요소 선택 |
| [name ^= 'value'] |
$("div[name ^= 'value']") |
name 속성의 값이 value로 시작하는 요소 선택 |
| [name |= 'value'] |
$("div[name |= 'value']") |
name 속성의 값이 value 이거나 value 시작하는 요소 선택 |
| [name *= 'value'] |
$("div[name *= 'value']") |
name 속성의 값이 value가 포함된 요소 선택 |
| [name ~= 'value'] |
$("div[name ~= 'value']") |
name 속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소 선택 |
| [name $= 'value'] |
$("div[name $= 'value']") |
name 속성의 값이 value로 끝나는 요소 선택 |
| [name='value'][name2='value2'] |
$("div[name='value'][name2='value2']") |
name 속서의 값이 value이고 name2 속성의 값이 vlaue2인 요소 선택 |
2. Jquery 전용 선택자
| Selector |
설 명 |
| :odd |
홀수 요소 선택 |
| :even |
짝수 요소 선택 |
| :first |
첫번째 요소 선택 |
| :last |
마지막 요소 선택 |
| :root |
document의 루트 요소 선택 |
| :target |
document의 URL의 flagment 식별자로 지정된 대상 요소를 선택 |
| :header |
h1, h2, h3 등과 같이 헤더인 모든 요소를 선택 |
| :empty |
해당 요소가 비어 있는 요소 선택 - 자식이 없는 모든 요소 선택 |
| :parent |
부모요소 선택 - 하나 이상의 하위 노드가 있는 모든 요소를 선택 |
| Selector |
설 명 |
| :eq() |
인자의 순번에 있는 요소를 선택 |
| :gt() |
인자보다 큰 요소 선택 |
| :lt() |
인자보다 작은 요소 선택 |
| :lang() |
지정된 언어의 모든 요소를 선택 |
| :not() |
인자의 조건이 아닌 요소를 선택 |
| :contains() |
해당 인자를 가지고 있는 요소 선택 |
| :has() |
인자요소를 가지고 있는 요소를 선택 |
| :animated |
움직이는 요소를 선택 |
| Selector |
설 명 |
| :button |
input 태그중 type 속성이 button인 요소 선택 |
| :checkbox |
체크박스 요소 선택 |
| :radio |
라디오 요소 선택 |
| :checked |
checkbox, radio 의 체크된 요소 선택 |
| :disabled |
비활성화된 요소 선택 |
| :enabled |
활성화된 요소 선택 |
| :file |
<input type="file" /> 요소 선택 |
| :focus |
focus 상태 요소 선택 |
| :image |
<input type="image" /> 요소 선택 |
| :input |
input, textarea, select, button 모든 입력 컨트롤 선택 |
| :password |
<input type="password" /> 요소 선택 |
| :text |
<input type="text" /> 요소 선택 |
| :hidden |
<input type="hidden" /> 요소 선택 |
