jQuery - 필터 선택자

jQuery 선택자

• jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
• 중간에 자바스크립트 코드 같이 작성
• HTML 태그를 쉽게 선택하기 위해 선택자 사용
• 선택자 구조
  • $(‘선택자’).메소드(매개변수, 함수 등)
  • $(‘span’).hide();
  • 큰 따옴표 / 작은 따옴표 다 사용 가능
• 선택자 종류
  • 직접 선택자
    • 전체 : $("*")
    • 태그 : $("태그명")
    • 아이디 : $("#id 명")
    • 클래스 : $(".class 명")
    • 그룹 선택자
  • 인접 관계 선택자
    • 상위 요소(조상/부모) 선택자
    • 하위 요소 (자식/자손) 선택자
    • 형제 선택자
  • 필터 선택자
  • 속성 선택자
  • 컨텐츠 탐색 선택자

필터 선택자

• 태그의 상태나 순서 등으로 선택
• ${‘태그명:순서필터’)
  • $(‘tr:odd’) : 홀수 행만 선택
• ${‘태그명:상태필터’)
  • $(‘input:checked’) : 체크 상태인 input 태그 선택
• 요소 : 필터
  • 요소 : odd - 홀수 번째 위치한 요소 선택
  • 요소 : even - 짝수 번째
  • 요소 : first - 첫 번째
  • 요소 : last - 마지막
  • 요소 : checked - 체크된 요소 선택(radio나 checkbox)
  • 요소 : selected - 선택된 요소 선택(select의 option selected)
  • 요소 : disabled - 비활성 입력 양식 요소 선택
  • 요소 : enabled - 활성화된 입력 양식 요소 선택
  • 요소 : focus - 커서가 놓여진 입력 양식 요소 선택
  • 요소 : eq(n) - n번째(equal)
  • 요소 : not(선택자) - 선택자와 일치하지 않은 요소 선택
  • 요소 : lt(n) - n번째 미만(less than)
  • 요소 : gt(n) - n번째 초과(greater than)
  • 요소 : has(선택자) - 선택자를 갖고 있는 요소 선택
  • 요소 : nth:child(숫자n) - n의 배수 : nth-child(3n) : 0, 3, 6 ...(번째)
  • 요소 : nth:child(숫자n+1) - n+1의 배수 : nth-child(3n+1) : 1, 4, 7 ...(번째)
• filterSelector.html

  <script type="text/javascript">
       $(document).ready(function() {
           // 1. 홀수행 선택(1, 3, 5) (행 인덱스 0 부터 시작)
            $('#table1 tr:odd').css('background-color', 'gray');
            // 2. 짝수행 선택 (행 인덱스 0 부터 시작)
            $('#table1 tr:even').css('background-color', 'green');
            // 3. 첫 번째 행 선택 (행 인덱스 0 부터 시작)
            $('#table1 tr:first').css({'background-color':'gray', 'fontsize':'20pt'});
            // 4. 특정 행 선택 : tr의 5행(여섯번째 행)
            $('#table1 tr:eq(5)').css('color', 'red');
            // 4. 특정 행 선택 : tr의 5행(여섯번째 행)
            $('#table1 tr:gt(5)').css('color', 'blue');
            // table2에서 찾기
            // 6. tr의 0행 제외하고 모두 선택
            $('#table2 tr:not(0)').css('background', 'gold');
            // nth : 서수(~번째)
            // 7. nth-child(숫자n+1) : 3n+1번째 : 3의 배수 + 1 번째 선택 : 1, 4, 7, 10
            $('#table2 tr:nth-child(3n+1)').css('background-color', 'orange');
            // 7. 짝수 열 선택(2n)
            $('#table2 td:nth-child(2n)').css('background-color', 'red');
       });
    </script>