JavaScript 10. jQuery 선택자필터

zhyun1220·2020년 10월 12일
0

html

목록 보기
18/21

.선택자 필터

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

1. 기본 필터

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

선택자 : 필터

  • :first 선택 요소 중 첫번째 요소
    • :eq(0)
  • :last 선택 요소 중 마지막 요소
    • :eq(-1)
  • :even 선택 요소 중 짝수 요소
    • .even()
  • :odd 선택 요소 중 홀수 요소
    • .odd()
  • :eq(index) 선택 요소 중 주어진 index에 일치하는 index를 가진 요소
  • :gt(index) 선택 요소 중 인덱스가 주어진 index보다 큰 요소들(greater than 의미)
    • $("li:gt(3) $("li").slice(4)
  • :lt(index) 선택 요소 중 인덱스가 주어진 index보다 작은 요소들(less than)
    • $("li:lt(4)) $("li").slice(0,3)
  • :not(selector) 괄호의 selector와 일치하는 모든 요소를 제외

2. 자식 필터

  • 요소를 자식으로 갖는 부모의 그룹안에서 해당 자식을 찾는다.
  • $("td:first-child")
    • td를 자식으로 하는 tr그룹에서 첫번째 자식

종류

  • :first-child 부모에 속한 자식 중 첫번째 자식요소와 일치
  • :last-child
  • :nth-child(index/even/equation)
  • :only-child
    • 자식이 부모요소의 유일한 자식요소인 것과 일치
  • first(), last() : 모든 요소 통틀어서 첫번째와 마지막 (딱1개)
  • :first-child, :last-child => 각 부모별 요소중 첫번째, 마지막째 애들(여러개 될 수 있음)

예제 jQuery7selectorFilter / 1008_5.html

3. 내용 필터

:contains(text)

  • 지정한 text를 포함하는 모든 요소를 반환(대소문자 구분)
$("p:contains(jQuery)").css(...);
$("body * : contains(jQuery)").css(...);
$("body:contains(jQuery)").css(...);

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_contains

:has(selector);

  • 지정한 selector를 포함하고 있는 모든 요소 반환
  • $("div:has(p, span)").css(...);
    • p,span 모두 다 있어야 하는게 아닌 요소 하나라도 있으면 됨

:empty

  • 자식요소도 없고 텍스트도 없는 모든 요소 반환

:parent

  • 자식요소 또는 텍스트를 갖고 있는 모든 요소를 반환

예제 jQuery7selectorFilter / 1009_1.html

4. 가시성상태 필터

:hidden

  • .filter(":hidden")
  • 숨겨진 요소를 선택
  • 대상 - 숨겨진 요소의 유형(작동하는 요소 유형)

:visible

예제 jQuery7selectorFilter / 1009_2.html, 1009_3.html

5.Form상태 필터

:enabled

  • 현재 사용 가능한 요소와 일치

:disabled

  • 현재 사용불가능한 요소와 일치

:selected

  • 선택된 요소(select option에서 사용)

:checked

예제 jQuery7selectorFilter / 1009_5~6.html

profile
HI :)

0개의 댓글