$("#unique") // 찾으려는 속성값 앞에 '#' 을 붙여서 검색
$("#\\#unique") // id 속성 값 앞에 '#' 이 있는 경우 '\' 를 id의 속성 값에 속한 '#' 앞에 붙여 문자열로 처리하여 검색
$("div") // 검색하고자 하는 DOM 노드의 태그명
$(".myClass") // 검색하길 원하는 class 속성의 값
$("*") // document 전체를 의미
$("div,span,p.myClass") // 입력 받은 selector 순서대로 검색된 element를 리턴한다.
ancestor : 기준이 되는 selector
descendant : ancestor를 기준으로 하위 노드에 존재하는 element를 찾기 위한 selector
$("div p") // div 하위에 존재하는 p-element 를 찾는다.
parent : 기준이 되는 selector
child : parent를 기준으로 인접한 child element를 찾기 위한 selector
$("div > p") // div 의 바로 하위에 존재하는 자식 노드 p-element 를 찾는다.
prev : 기준이 되는 selector
next : prev를 기준으로 같은 노드 레벨의 인접한 prev 이후에 위치하는 element를 찾기 위한 selector
$("div + p") // div-element 와 동일한 노드에 존재하는 p-element 를 리턴한다.이때, p-element 는 div-element 에 인접한 바로 다음의 element로 존재해야 한다.
prev : 기준이 되는 selector
siblings : prev를 기준으로 같은 노드 레벨의 element를 찾기 위한 selector
$("div ~ p") // div-element 와 동일한 노드에 존재하는 모든 p-element 를 리턴한다.
$("p:first") // 제일 처음으로 검색된 p-element 를 리턴한다.
$("p:last") // 제일 마지막에 위치한 p-element 를 리턴한다.
selector : 대상 element 에서 제외시킬 selector
$("p:not(.MyClass)") // 일차하는 p-element 들 중 class 속성 값이 .MyClass 가 아닌 p-element를 리턴한다.
$("span:even") // document 에서 span-element 중 0, 2, 4, ... 번째 나오는 span-element 를 리턴
$("span:odd") // document 에서 span-element 중 1, 3, 5, ... 번째 나오는 span-element 를 리턴
index : 선택할 element 의 index(0부터 시작)
$("td:eq(7)") // document 에 존재하는 td-element 중에서 여덟 번째 위치하는 td-element 를 리턴
index : 선택할 element 의 index(0부터 시작)
$("td:gt(5)") // document 에 존재하는 td-element 중에서 5번째 보다 큰 위치에 존재하는 td-element 를 리턴
index : 선택할 element 의 index(0부터 시작)
$("td:lt(5)") // document 에 존재하는 td-element 중에서 5번째 보다 작은 위치에 존재하는 td-element 를 리턴
$(":header") // Title 등을 나타내는 데 사용되는 element인 hx-element(<h1>, <h2>, ...) 들을 검색한다.
$(":header", "span") // span-element 에 포함되는 hx-element(<h1>, <h2>, ...) 들을 검색한다.
ex) <span><h1>Hello! jQuery!</h1></span>
$("img:animated") // 현재 animate 되고 있는 img-element 들을 리턴한다.
text : 검색하고자 하는 text 속성 값에 해당하는 문자열(대소문자를 구분한다.)
$("span:contains('jQuery')") // span-element 중에서 "jQuery" 라는 문자열을 text 속성값으로 포함하고 있는 span-element 를 리턴
$("span:not(:contains('jQuery'))") // span-element 중에서 "jQuery" 라는 문자열을 text 속성값으로 포함하고 있지 않은 span-element 를 리턴
$("td:empty") // td-element 중에서 자식 노도가 존재하지 않고, text 속성이 비어 있는 element 를 검색
selector : filter 하고자 하는 jQuery 표현식
$("div:has(span)") // span-element 를 자식 노드에 포함하고 있는 div-element 를 리턴
$("div:parent") // 자식 노드를 포함하고 있꺼나, text 속성에 값을 가지고 있는 element 를 리턴
$(":hidden", document.body) // style 속성 값 중 display 가 none 이거나 input-element 의 type 속성 값이 hidden 인 element 리턴
ex) <input type="hidden" name="num" value="8" />
<p style="display:none">hello!</p>
$("span:hidden") // span-element 중 "hidden" 속성 값을 갖고 있는 span-element 리턴
$(":hidden", "div") // div-element 하위 자식 노드에 "hidden" 속성 값을 갖고 있는 element 리턴
$(":visible", "body") // body-element 에서 화면에 보이는 element 를 리턴
$("body:visible") // body-element 가 hidden 속성 값을 갖지 않을 경우 body-element 전체 내용을 1개의 element 로 리턴
$("div[id]") // dis-element 중 id 속성을 갖고 있는 div-element 를 리턴
$("div[name], input[name]") // name 속성을 갖는 div-element와 input-element 를 순서대로 리턴
$("span[style]") // style 속성은 기본적으로 사용자가 작성하지 않아도 적용되어 있는 속성이라 모든 span-element 를 리턴
$("input[name='group1']") // input-element 중 name 속성을 갖고 있고 name 속성 값이 "group1" 인 input-element 를 리턴
$("input[name!='group1']") // input-element 중 name 속성 값이 "group1" 이 아닌 input-element 를 리턴
$("input[name^='group1']") // input-element 중 name 속성 값이 "group1" 으로 시작하는 input-element 를 리턴
$("input[name$='group1']") // input-element 중 name 속성 값이 "group1" 으로 끝나는 input-element 를 리턴
$("input[name*='group1']") // input-element 중 name 속성 값이 "group1" 을 포함하는 input-element 를 리턴
$("input[value][name*='group1']") // input-element 중 value 속성을 가지고 있으며, name 속성 값이 "group1" 을 포함하는 input-element 를 리턴
index(Number|String) : 일치하는 index 에 해당하는 element 를 리턴한다. Number 인 경우 1부터 시작하며, String 인 경우 even, odd, equation 있다.
$("td:nth-child(3)") // td 의 parent-element 를 기준으로 3번째 위치한 td-element 들을 리턴
ex) <tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
$("td:nth-child('even')") // td 의 parent-element 를 기준으로 2, 4, 6, ... 번째 위치한 td-element 들을 리턴
ex) <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
$("td:nth-child('odd')") // td 의 parent-element 를 기준으로 1, 3, 5, ... 번째 위치한 td-element 들을 리턴
ex) <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
$("td:nth-child('equation')") // 'equation' 는 대상 element 와 일치하는 모든 element 를 리턴한다. 따라서 document 에 존재하는 모든 td-element 를 리턴
ex) <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
$("td:nth-child(3n)") // 3*n(3의 배수)번째를 리턴
ex) <tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
대상 element의 부모 노드를 기준으로 첫 번째 child element 를 리턴한다.
$("td:first-child") // td 의 parent-element 를 기준으로 첫 번째 위치한 td-element 들을 리턴
대상 element의 부모 노드를 기준으로 마지막 child element 를 리턴한다.
$("td:last-child") // td 의 parent-element 를 기준으로 마지막에 위치한 td-element 들을 리턴
대상 element의 부모 노드를 기준으로 하나만 존재하는 child element 를 리턴한다.
$("td:only-child") // td 의 parent-element 를 기준으로 하나의 td-element 만이 존재할 경우 리턴
대상 element 들 중 input, textarea, select, button 등과 일치하는 form element 를 리턴한다.
$(":input") // 모든 input, textarea, select, button 등 form 관련 element 를 리턴
$("form[name='second']:input") // form-element 의 name 속성값이 "second" 인 element 의 child-element 로 input 관련 element 를 리턴
ex) <form name='second'>
<input type='text' name='s' />
<select name='s'></select>
<textarea name='s'></textarea>
<button></button>
</form>
대상 element 들 중 type 속성의 값이 text 인 element 를 리턴한다.
$(":text") // document 의 input-element 중에서 type 속성의 값이 "text" 인 element 를 리턴
$("#second:text") // id 속성값이 "second" 이고 type 속성의 값이 "text" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 password 인 element 를 리턴한다.
$(":password") // document 의 input-element 중에서 type 속성의 값이 "password" 인 element 를 리턴
$("#second:password") // id 속성값이 "second" 이고 type 속성의 값이 "password" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 radio 인 element 를 리턴한다.
$(":radio") // document 의 input-element 중에서 type 속성의 값이 "radio" 인 element 를 리턴
$("input[name='fruit']:radio") // name 속성값이 "fruit" 이고 type 속성의 값이 "radio" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 checkbox 인 element 를 리턴한다.
$(":checkbox") // document 의 input-element 중에서 type 속성의 값이 "checkbox" 인 element 를 리턴
$("input[name='fruit']:checkbox:checked") // name 속성값이 "fruit" 이고 type 속성의 값이 "checkbox" 인 element 중 체크되어 있는 element 만 리턴
대상 element 들 중 type 속성의 값이 submit 인 element 를 리턴한다.
$(":submit") // document 의 input-element 중에서 type 속성의 값이 "submit" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 image 인 element 를 리턴한다.
$(":image") // document 의 input-element 중에서 type 속성의 값이 "image" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 reset 인 element 를 리턴한다.
$(":reset") // document 의 input-element 중에서 type 속성의 값이 "reset" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 button 인 element 를 리턴한다.
$(":button") // document 의 input-element 중에서 type 속성의 값이 "button" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 file 인 element 를 리턴한다.
$(":file") // document 의 input-element 중에서 type 속성의 값이 "file" 인 element 를 리턴
대상 element 들 중 type 속성의 값이 hidden 인 element 를 리턴한다.
$(":hidden") // document 의 input-element 중에서 type 속성의 값이 "hidden" 인 element 를 리턴
대상 element 들 중 활성화 되어 있는 element 를 리턴한다.
$("input:enabled") // input-document 들 중에서 disabled 속성을 갖지 않는 element 를 리턴
대상 element 들 중 비활성화 되어 있는 element 를 리턴한다.
$("input:disabled") // input-document 들 중에서 disabled 속성을 갖는 element 를 리턴
input-element 에서 type 속성의 값이 checkbox, radio 인 element 중 선택되어 있는(checked) element를 리턴한다.
$("input:checked") // input-document 들 중에서 checked 속성을 갖는 element 를 리턴
$("input:radio:checked") // input-document 들 중에서 type 속성의 값이 "radio" 이고, checked 속성을 갖는 element 를 리턴
select-element 에서 선택된(selected) option-element 를 리턴한다.
$("select[name='garden'] option:selected") // name 속성의 값이 "garden" 인 element 의 child-element 가 selected 속성을 갖는 option-element 를 리턴