본문 바로가기
즐거움 넘치는 IT 세계/코드로 만드는 디자인

[ jquery 기초 ] jquery Filter - 기본 필터(Basic Filter)

by 디리씨 2019. 10. 3.
728x90

 

| Filter 이용한 개체 접근

형식(표현식) 설명
:animated 애니메이션이 동작중인 모든 요소와 일치하는 요소를 반환합니다.
:eq(index) Index에 해당하는 요소를 반환합니다.(단일요소)
:even 짝수의 요소를 반환합니다. (0부터 시작)
:odd 홀수의 요소를 반환합니다. (0부터 시작)
:first 첫번째 요소를 반환합니다.
:last 마지막 요소를 반환합니다.
:gt(index) Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다.
:lt(index) Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다.
:header 모든 헤더 요소들을 반환합니다.(h1,h2,h3….)
:not(selector) Selector와 일치되는 요소를 제외한 나머지 요소를 반환합니다.
:focus 현재 포커스가 위치한 요소를 반환합니다. (1.6 이상에서 지원)

 

jQuery의 필터는 말 그대로 거르다, 여과하다의 뜻으로 원하는 요소를 다양한 방식으로 걸러내는 역할을 합니다. 일반적으로 셀렉터와 함께 사용하는 경우가 대부분으로 셀렉터와 함께 써야 하는하는 것 알고 있는 분이 많이 있습니다. 하지만 필터는 단독으로도 사용이 가능하며, 필터와 필터를 연결해서도 사용이 가능합니다.

테이블의 컬럼인 td 항목을 예로 들어 설명을 하자면 다음과 같습니다.

 

$(“td:eq(0)”) td 요소중에 첫번째 항목만을 선택합니다.
(eq의 index는 0부터 시작입니다.) 
eq의 index는 0부터 시작을 하며 0 이면 요소중 첫번째, 1이면 두번째 요소가 됩니다.
$(“td:even”)
$(“td:odd”)
td 요소중에 짝/홀수번째 요소를 선택합니다. 짝/홀수의 구분은 eq의 index와 동일하게 구분이 됩니다.
$(“td:first”)
$("td:last")
td 요소중에 첫번째 요소, 마지막 요소를 선택합니다.
$(“td:gt(2)”)
$(“td:lt(2)”)
td 요소중에 2번째 요소 이후의 모든 요소를 선택하거나 2번째 요소 이전의 모든 요소를 선택합니다.



728x90
반응형