| 선택자 | 설명 |
|---|---|
| $("*") | 전체선택, 모든 요소를 선택함 |
| $("parent children") | 부모아래 모든 후손들 |
| $("parent > child") | 1대 자식선택자들 (1대후손 이외는 제외) |
| $(":contains(text)") | 요소내 텍스트에 text문자열이 포함되어 있는것 |
| $("td:eq(n)") | 인덱스가 n번인 요소 |
| $("tr:first") | 전체 돔에서 첫번째 하나만 |
| $("tr:first-child") | 부모의 첫번째 요소인 tr (tr이 첫번째여야 함, 다른 요소가 첫번째면 해당없음) |
| $("tr:first-of-type") | 부모의 자식중 tr 중 맨 처음 (자식중에 다른 타입요소가 있어도 상관없음) |
| $("tr:last") | 전체 돔에서 마지막 요소 오직하나 |
| $("tr:last-child") | 부모의 마지막 요소 ( 선택요소가 마지막이 아니면 해당없음) |
| $("tr:last-of-type") | 선택요소 타입의 마지막요소 |
| $("tr:gt(±n)") | 전체 인덱스가 n보다 큰 요소들 ±(앞/뒤) |
| $("tr:lt(±n)") | 전체 인덱스가 n보다 작은 요소들 ±(앞/뒤) |
| $(":has(selector)" | 선택자를 갖고있는 모든 요소 (선행 선택자가 없으면 body까지 올라간다) |
| $("prev + next") | 형제간 prev 바로 뒤에 있는 next 선택자 |
| $("prev ~ siblings") | 형제간 prev뒤에 있는 모든 siblings 들 |
| $(":not(selector[,sel,sel,..])") | selector이 아닌 요소들 |
| $(":nth-child(myval)") | myval = [index | even | odd | equation] = :nth-child(3n) $(":nth-of-type(myval)") |
| $(":nth-last-child(myval)") | 뒤에서 부터 $(":nth-last-of-type(myval)") |
| $("tr:odd") $("tr:even") | 홀수번째 짝수번째 |
| $("table tr:only-child") $("table tr:only-of-type") | tr 이 table하위 요소로 하나만 존재(하위 다른요소 있으면 해당없음) table아래 요소들중 tr이 오직 하나일 경우 |
| 선택자 | 설명 | example |
|---|---|---|
| $("[attribute|='value']) | 속성값과 완전히 일치 | |
| $("[attribute|='value']) | 속성값일치 또는 속성값+하이픈으로 시작하는 문자열 | "value" or "value-xx" |
| $("[attribute*='value']) | 속성값에 포함되어 있는 문자열 | $([class*|='mybg']) |
| $("[attribute~='value']) | 속성값에 공백으로 구분된 값이 포함 | <x attribute="aa value cc"> |
| $("[attribute^='value']) | 속성값으로 시작하는 문자열 | |
| $("[attribute$='value']) | 속성값으로 끝나는 문자열 | |
| $("[attribute!='value']) | 속성값이 일치하지 않는 요소 | |
| $("[attribute]") | 해당 속성을 갖고있는 요소 중복가능: $("[attr1][attr2][attr3]...") | $("div[id]") : id를 갖고있는 div |
| 선택자 | 설명 |
|---|---|
| $("div:animated") | 애니메이션중인 요소를 선택한다. 현재 움직이고 있는 (div중에서) |
| $(":button") | 버튼을 선택 : <button> or <input type="button"> |
| $(":checkbox") | 체크박스를 선택 eq) ([type=checkbox]), (:checkbox), (*:checkbox), (input:checkbox) |
| $(":checked") | 체크가 된 체크박스를 선택 |
| $(":enabled") | enabled되 모든 요소 선택 (disabled가 아닌것 모두) |
| $(":disabled") | disabled 된 모든 요소 선택 |
| $(":empty") | 요소내 텍스트가 공백인 경우 |
| $("input:file") | 속성타입이 파일인 요소 선택 |
| $(":header") | H 태그들에 적용 |
| $(":hidden") | 모든 hidden 요소를 선택함 |
| $(":image") | [type="image"] 과 동일 |
| $(":input") | 모든 입력요소를 선택 eq) input textarea,select,button ... |
| $("td:parent") | :empty 와 반대개념으로 선택됨 |
| $(":password") $(":radio") $(":submit") | [type=password]와 동일 [type=radio] [type=submit] |
| $(":root") | 전체 |
| $("option:selected") |
$("#id")
$(".class")
$("tag")
※ 복수 선택자를 지정가능하다. 내부에 콤마(,)로 구분해 여러 선택자 지정 가능
$("#id, .class, tab, ...")
| 문법 | 설명 | sample |
|---|---|---|
| parent() | 직계 부모 1개 요소 찾기 | $("li").parent(); |
| parent("subsel") | subsel이 있는경우, 부모가 subsel이 아닐경우 해당없음 | $("li").parent(".mycs"); |
| parents() | 조상들을 전부 검색(~body까지) | $("li").parents(); |
| parents("subsel") | subsel이 있는경우, subsel 타입들만 검색됨 | $("li").parents("p"); |
| parentsUntil(sel) | 선택자 < 검색 < 조상중 가장 가까운 sel 사이 요소들이 검색됨 | $("#myid").parentsUntil("div"); |
| 문법 | 설명 | sample |
|---|---|---|
| children() | 1레벨 다이렉트 자식들 모두 | $("div").children(); |
| children().first() | 1레벨 자식중 첫번째 자식 | $("tr").children().first(); 첫번째 td 예상됨 |
| children("subsel") | 1레벨 다이렉트 자식들 중에 subsel인 요소들 모두 | $("div").children("span"); |
| find("subsel") | 자손들중 subsel인 요소들 모두 | $("div").find("span"); |
| find("*") | 모든 자손들 (전체다) | $("div").find("*"); |
| 문법 | 설명 | sample |
|---|---|---|
| siblings() | 자신외 형제들 모두다 | $("span").siblings(); |
| siblings("subsel") | 형제들중 subsel 요소들 전체 | $("span").siblings(".a, .b"); |
| next() / prev() | 전/후 형제 1개 요소를 선택 | $("span").next(); |
| next("subsel") / prev("subsel") | 전/후 형제가 subsel일 경우만, 아니면 없음 | $("span").next(".a, .b"); |
| nextAll()/prevAll() | 자신 전/후의 모든 형제들 | $("span").nextAll(); |
| nextAll("subsel") / prevAll("subsel") | 자신 전/후의 모든 형제들중 subsel 인 것들만 | $("span").nextAll(".a, .b"); |
| nextUntil("subsel") prevUntil("subsel") | 자신 전/후 ~ subsel 전까지 모든 형제들 subsel이 없을경우, ~All과 같이 끝까지 검색된다. | $("span").nextUntil(".a, .b"); .a, .b 가까운 것이 선택됨 |
| 문법 | 설명 | sample |
|---|---|---|
| first() | 전체 화면내 맨 처음나오는 요소(오직 1개) | $("span").first(); |
| last() | 전체 화면내 맨 마지막에 나오는 요소(오직 1개) | $("span").last(); |
| eq(n) | 전체 화면내 n번째 나오는 요소(오직 1개) | $("tr").eq(3); |
| filter("subsel") | 전체 화면내 필터링된 지정 요소들 전부 | $("tr").filter(".a, .b"); |
| not("subsel") | 전체 화면내 필터링된 지정 요소가 아닌것들 전부 | $("tr").not(".a, .b"); |