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
반응형
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
[ jquery 기초 ] jquery Filter - 자식 필터(Child Filter) (0) | 2019.10.05 |
---|---|
[ jquery 기초 ] jquery Filter - 폼 필터(Form Filter) (0) | 2019.10.04 |
[ VueJS 입문 ] 컴포넌트의 사용 / Intro to Components (0) | 2019.10.03 |
[ jquery 기초 ] jquery - DOM 계층을 이용한 요소 접근 (0) | 2019.10.02 |
[ VueJS 입문 ] 여러 인스턴스 사용하기 / Multiple Instance (0) | 2019.10.02 |