선택자 필터
선택자:필터
- 기본필터, 자식필터, 내용필터, 입력상태 필터, 기타필터
- 기본선택자보다 더 정밀한 선택이 필요한 경우 필터와 선택메서드 활용
- 선택자 뒤의 콜론다음에 기술하여 선택자:필터 식으로 사용
- 선택자로 기준 요소를 먼저 찾고, 필터는 이 요소 주변의 다른 요소나 선택된 집합 중의 일부를 더 정밀하게 선택하는 역할을 한다.
1. 기본필터
:first
:last
:even
:odd
:ep(index)
- index 필수
- 선택요소 중 주어진 index에 일치하는 index를 갖는 요소
:gt(index) _deprecated
- greater than : 선택요소 중 index가 주어진 index보다 큰 요소
- slice(시작) 로 대체
:lt(index) _deprecated
- lt(index)
- less than : 선택요소 중 index가 주어진 index보다 큰 요소
- slice(시작,끝) 로 대체
:not(selector)
- not(selector)
- 괄호의 selector와 일치하는 모든 요소를 제외
2. 자식필터
- 요소를 자식으로 갖는 부모의 그룹안에서 해당 자식을 찾는다.
:first-child
:last-child
:nth-child()
- index : 지정된 위치의 요소들과 일치
- even, odd : 짝수/홀수번째 요소들과 일치
- equation : 방정식 값 위치의 요소들과 일치
:only-child
- 자신이 부모요소의 유일한 자식요소인 것과 일치
예제 (jquery7_ex04)
3. 내용필터
:contains(text)
- 지정한 텍스트를 포함하는 모든 요소를 반환
- 대소문자 구분
:has(selector)
- 지정한 선택자를 포함하고 있는 모든 요소 반환
- $("div:has(p,span)") : div가 p와 span을 가지고 있느냐
:empty
- 자식 요소도 없고 텍스트도 없는 모든 요소 반환
- $("div:empty")
:parent
- 자식 요소 또는 텍스트를 갖고 있는 모든 요소
4. 가시성상태 필터
:hidden
- 숨겨진 요소를 선택
- 대상 : 숨겨진 요소의 유형(작동하는 요소 유형)
1) display : none
2) form 요소중 type="hidden"
3) width, height가 0으로 설정됨
4) 부모 요소가 hidden
- visibility:hidden 요소에는 작동하지 않음
- $("p:hidden").show(5000);
:visible
- 보이는 요소를 선택
- 대상 : 숨겨진 요소가 아닌 것
1) display:none 이 아닌 것
2) type="hidden"이 아닌 것
3) width=0, height=0이 아닌 것
4) 부모요소가 hidden이 아닌 것
5) visibility=hidden, opacity=0인 것
:enanled
:disabled
:selected
- 선택된 요소
- select option 에서 사용
- checkbox, radio 버튼에서 사용X
:checked
- 체크된 요소
- checkbox, radio 버튼에서 사용