[jQuery] 선택자(Selector) 종류 및 사용 방법

 

 

 

1. 기본 탐색 선택자

// 선택한 요소의 부모 요소를 선택
$("요소 선택").parent()

// 선택한 요소의 상위 요소를 모두 선택
$("요소 선택").parents()

// 선택한 요소의 상위 요소중 가장 가까운 <div>만 선택
$("요소 선택").closest("div")

// 선택한 요소의 자식 관계에 지정한 요소 선택
$("요소 선택 > 자식요소")

// 선택한 요소의 모든 자식 요소를 선택
$("요소 선택").children()

// 선택한 요소의 이전 요소를 선택
$("요소 선택").prev()

// 선택한 요소의 이전 요소 모두 선택
$("요소 선택").prevAll()

//선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택
$("요소 선택").prevUntill("요소명")

// 선택한 요소의 다음 요소를 선택
$("요소 선택").next()
$("요소 선택+다음 요소")


// 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택
$("요소 선택").nextUntill("h2")

// 선택한 요소의 모든 형제 요소를 선택
$("요소 선택").siblings()

 

 

 

---

2. 위치 탐색 선택자

//전체 <li>요소 중 첫 번째 요소만 선택
$("li:first")

//전체 <li>요소 중 마지막 요소만 선택
$("li:last")

//전체 li요소 중 짝수 번째(홀수 인덱스) 선택
$("li:odd")

//전체 li요소 중 홀수 번째(짝수 인덱스) 선택
$("li:even")

//전체 li요소중 세번째 요소 선택
$("li:nth-child(3)")

//전체 li요소중 3의 배수 번째에있는  요소 선택
$("li:nth-child(3n)")

//부모 요소 내에 li 요소가 1개 뿐인 li 요소만 선택
$("li:only-child")

// li 요소 중 인덱스가 2가 참조하는 요소를 불러옵니다
$("li:eq(2)")
$("li").eq(2)

// li 요소 중 인덱스 1보다 큰 인덱스가 참조하는 요소를 불러옵니다
$("li:gt(1)")

// li 요소 중 인덱스가 1보다 작은 인덱스가 참조하는 요소를 불러옵니다
$("li:lt(1)")

// li 요소 중 제외요소만 빼고 선택
$("li:not(:제외요소)")

// li 요소 중 <span>을 포함하는 요소만 선택
$("li:has('span')")

 

 

 

---

3. 속성 탐색 선택자

모든 요소 및 속성 선택 가능

// <li> 요소 중 title 속성이 포함된 요소만 선택
$("li[title]")

// 요소 중 title 속성값이 '리스티'인 요소만 선택
$("li[title='리스트']")

// <a> 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택
$("a[href^='http://']")

// <a> 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택
$("a[href$='.com']")

// <a> 요소 중 href 속성값이 'easyspub'을 포함하는 요소만 선택
$("a[href*='easyspub']")

// 요소 중 숨겨져 있는 요소만 선택
$("li:hidden")

// 요소 중 보이는 요소만 선택
$("li:visible")

// selected 속성이 적용된 요소만 선택
$(":selected")

// checked 속성이 적용된 요소만 선택
$(":checked")

// input 요소중 type 속성값이 'text'인 요소만 선택
$(":text")