.선택자 필터

• 기본 필터, 자식 필터, 내용 필터, 입력상태 필터, 기타 필터
• 기본 선택자보다 더 정밀한 선택이 필요한 경우 필터와 선택 메소드를 활용한다.
• 선택자 뒤의 콜론(:) 다음에 기술하여 "선택자:필터" 식으로 사용한다.
• 선택자로 기준 메소드
• 사용 방법
  • 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")
• 숨겨진 요소를 선택
• 대상 - 숨겨진 요소의 유형(작동하는 요소 유형)
  • 1)display : none
  • 2) 폼 요소 중 type='hidden'
  • 3) width와 height가 0으로 설정 됨
  • 4) 부모 요소가 hidden
  • 작동 안할 때 : visibility:hidden 요소에는 작동하지 않음 //잘안씀
  • 예) $("p:hidden).show("5000");
  • 참고 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_hidden

:visible

• 보이는 요소를 선택
• 대상 - 숨겨진 요소가 아닌 것
  • 예) $("p:visible).css(...);
  • 참고 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_visible

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

5.Form상태 필터

:enabled

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

:disabled

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

:selected

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

:checked

• 체크된 요소(checkbox, radio버튼에서 사용)
• 참고 : https://lng1982.tistory.com/80

예제 jQuery7selectorFilter / 1009_5~6.html