다양한 Element 선택자

기본 셀렉터

$('태그명') : HTML 문서에서 해당 태그를 모두 선택 $('#id') : HTML 문서에서 해당 id가 지정된 element 선택 $('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택

$('p')
$('input[name=gender]:radio')
$("input[name=엘리먼트이름]")...
$("input[@name=rList]")
$( "input[name='lesson']")
$(".class)..
$("#id)..

순서 기반 셀렉터

기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.

$('선택자:even')

선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.

$('선택자:odd')

선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.

$('선택자:eq(인덱스)')

선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.

$('선택자:first') , $('선택자:last')

선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다

$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')

선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다

관계 기반 셀렉터

부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.

$('선택자').children()

선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.

$('선택자').parent()

선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.

$('선택자').next() , $('선택자').nextAll()

선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.

$('선택자').prev() , $('선택자').prevAll()

선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.

이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다

조건 기반 셀렉터

$('선택자').filter('조건선택자')

앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.

$('선택자').find('조건선택자')

앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.

filter() vs find()

여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.

filter()

현재 선택된 집합을 대상으로 검색함

find()

현재 선택된 집합의 자식 요소를 대상으로 검색함

filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.

이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!

$('선택자:contains("searchText")')

$('선택자:not(조건선택자)')

선택자 중첩

지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다. 기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.

$('선택자 선택자 선택자 ...')