[목차]
(모든 / 현재) 선택자
$("*")
모든 요소를 선택 ※ 따옴표 붙여야 함.
$(this)
현재 요소를 선택 ※ 소문자로 적어야 하며, 따옴표 안 붙임.
(요소/ id / class ) 선택자
$("h1")
모든 <h1> 요소를 선택
$("#hz")
id="hz"인 요소를 선택
$(".hz")
class="hz"인 모든 요소를 선택
선택자 결합해 선택 범위 좁히기 ★★★★★
$("p.hz")
class="hz"인 모든 <p> 요소를 선택
$("p:first")
첫 번째 <p> 요소를 선택
$("ul li:first")
첫 번째 <ul> 요소의 첫 번째 <li> 요소를 선택 ★
$("ul li:first-child")
모든 <ul> 요소의 첫 번째 <li> 요소를 선택 ★
$("a[target='_blank']")
target="_blank" 속성 가진 모든 <a> 요소 선택
$("a[target!='_blank']")
target="_blank" 속성 안 가진 모든 <a> 요소 선택.
$('#hz:text')
id="hz" type="text"인 폼요소
(처음/마지막)선택자
$("p:first")
첫번째 <p> 요소를 선택
$("p:last")
마지막 <p> 요소를 선택
(홀/짝)선택자
$("tr:even")
모든 짝수 번째 <tr> 요소 선택 ※ <th> 라인은 빼고 작동함.
$("tr:odd")
모든 홀수 번째 <tr> 요소 선택 ※ <th> 라인은 빼고 작동함.
자식순번선택자
$("p:first-child")
<body> 제외한 어떤 요소의 첫 번째 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>
$("p:first-of-type")
<body> 고려한 모든 요소의 첫 번째 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>
$("p:last-child")
<body> 제외한 어떤 요소의 마지막 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>
$("p:last-of-type")
<body> 포함한 모든 요소의 마지막 자식 요소로 있는 <p> 요소 선택
(예) <body> <div><p></p><p></p></div><p></p><p></p></body>
$("li:nth-child(1)")
자식 요소로 있는 모든 첫 번째 <li> 요소 선택.
$("li:nth-last-child(1)")
자식 요소로 있는 모든 <li> 요소 중, 마지막부터 셌을 때 첫 번째인 요소들 선택.
$("li:nth-of-type(2)")
자식 요소로 있는 모든 <li> 요소 중, 처음부터 셌을 때 두 번째인 요소들 선택.
$("li:nth-last-of-type(2)")
자식 요소로 있는 모든 <li> 요소 중, 마지막부터 셌을 때 두 번째인 요소들 선택.
$("b:only-child")
유일한 자식 요소로 있는 모든 <b> 요소 선택.
$("h3:only-of-type")
<body> 고려해 유일하게 자식 요소로 있는 <h3> 요소를 선택.
(자식/자손/형제)선택자
$("div > p")
모든 <div> 요소의 자식 요소로 있는 모든 <p> 요소를 선택 ※ <div> 바로 밑의 <p> 요소
$("div p")
모든 <div> 요소의 자손 요소로 있는 모든 <p> 요소를 선택 ※ <div> 안에 있는 모든 <p> 요소
$("ul + h3")
각 <ul> 요소 다음에 위치하는 모든 <h3> 요소를 선택
$("ul ~ table")
각 <ul> 요소와 형제 관계 (=동위)에 있는 모든 <table> 요소를 선택
가상선택자
$("ul li:eq(0)")
각 <ul><li> 구조에서 첫 번째 위치하는 <li> 요소를 선택
※ eq = equal
※ 가장 첫 번째는 0부터 시작
$("ul li:gt(0)")
각 <ul><li> 구조에서 첫 번째 이후의 모든 <li> 요소를 선택
※ gt = greater than
$("ul li:lt(2)")
각 <ul><li> 구조에서 세 번째 미만의 모든 <li> 요소를 선택
※ lt = less than
$(":header")
<h1>, <h2>.....<h6> 등 모든 문단 제목 요소를 선택
$(":header:not(h1)")
<h1> 요소를 제외한 모든 문든 제목 요소를 선택
$(":animated")
모든 애니메이션 요소를 선택
$(":focus")
현재 focus된 요소를 선택
$(":contains(Hz)")
Hz 글자 포함하는 모든 요소 선택
$("div:has(p)")
<p> 요소를 갖는 모든 <div> 요소를 선택
$(":empty")
<input />처럼 닫는 태그 없이 사용하는 모든 요소를 선택
$(":parent")
글자를 포함해 어떤 요소의 부모 요소가 되는 모든 요소를 선택
$("p:hidden")
현재 숨김 처리되어 결과에 나오지 않는 모든 <p> 요소를 선택
$("table:visible")
보이는 모든 <table> 요소 선택
$(":root")
해당 웹문서의 최상위 요소 선택
$("p:lang(ko)")
lang 속성의 속성값이 ko로 시작하는 모든 <p> 요소를 선택
속성선택자
$("[id]")
id 속성을 가진 모든 요소를 선택
$("[href]")
href 속성 가진 모든 요소를 선택
$("[id=hz]")
id 속성의 속성값이 hz인 모든 요소를 선택
(예) $("input[name=homzzang]" - 네임이 홈짱인 인풋 요소
$("p[id!=hz]")
id 속성의 속성값이 hz이 아닌 모든 요소를 선택
※ id 속성 자체를 안 가진 <p> 요소도 선택됨.
$("[id$=zzang")
id 속성의 속성값이 zzang으로 끝나는 모든 요소 선택.
$("[id|=hz]")
id 속성의 속성값이 hz 또는 hz- 인 모든 요소 선택.
$("[id^=L]")
id 속성의 속성값이 대문자 L로 시작하는 모든 요소 선택. 예제보기
$("[title~=hz]")
title 속성의 속성값에 hz 단어가 들어가는 모든 요소 선택.
$("[id*=hz]")
id 속성의 속성값에 hz 문자열이 들어가는 모든 요소 선택.
input 타입 선택자
$(":input")
모든 input 요소 선택
$(":text")
type="text"인 모든 폼 요소를 선택
$(":password")
type="password"인 모든 폼 요소를 선택
$(":radio")
type="radio"인 모든 폼 요소를 선택
$(":checkbox")
type="checkbox"인 모든 폼 요소 선택.
$(":submit")
type="submit"인 모든 폼 요소 선택.
$(":reset")
type="reset"인 모든 폼 요소 선택.
$(":button")
type="button"이거나 요소가 <button>인 모든 폼 요소를 선택.
$(":image")
type="image"인 모든 폼 요소 선택.
$(":file")
type="file"인 모든 폼 요소 선택.
$(":enabled")
enabled 속성 (= 활성화된 상태)인 모든 폼 요소 선택.
$(":disabled")
disabled 속성 (= 비활성화된 상태)인 모든 폼 요소 선택.
$(":selected")
드롭다운 리스트에서 선택된 모든 옵션 요소 선택.
$(":checked")
체크된 모든 폼 요소 선택.
