jQuery_7.필터

oungoo·2020년 10월 8일
0

HTML_CSS_JavaScript

목록 보기
20/21

선택자 필터

선택자:필터

  • 기본필터, 자식필터, 내용필터, 입력상태 필터, 기타필터
  • 기본선택자보다 더 정밀한 선택이 필요한 경우 필터와 선택메서드 활용
  • 선택자 뒤의 콜론다음에 기술하여 선택자:필터 식으로 사용
  • 선택자로 기준 요소를 먼저 찾고, 필터는 이 요소 주변의 다른 요소나 선택된 집합 중의 일부를 더 정밀하게 선택하는 역할을 한다.

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인 것

5. Form 상태 필터

  • 입력양식의 현재 상태에 따라 선택

:enanled

  • 현재 사용가능한 요소
  • 활성화

:disabled

  • 현재 사용 불가능한 요소
  • 비활성화

:selected

  • 선택된 요소
  • select option 에서 사용
  • checkbox, radio 버튼에서 사용X

:checked

  • 체크된 요소
  • checkbox, radio 버튼에서 사용

0개의 댓글