jQuery 요소 선택

(2018-08-14)
1. jQuery에 의한 HTML 요소/노드의 선택/추출jQuery() 또는 $() 함수에, CSS 선택자 형식으로 인수 전달하면, 이에 매칭하는 요소들을 리턴
     - HTML 문서 DOM 트리의 요소들에 대해,
     - () 안에 언급된 1 이상 매칭되는 요소들을 추출      


2. jQuery 선택자 사용법 : $('선택자')      ☞ CSS 선택자 참조

  ㅇ 기본 선택자 :  *, id, class, 태그 선택자
     -  $('*') : 모든 요소 선택
     -  $('#id명')
     -  $('.class명')
     -  $('태그명')

  ㅇ 조합 선택자 : 콤머(,) 및 샵(#)
     - OR 선택자   : $('#id명_1, #id명_2, #id명_3, ... ')
     - AND 선택자  : $('태그명#id명')   => 해당 태그명에 해당 id명이 동시에 부합되는 것

  ㅇ 계층 선택자
     - 직계 자식 선택자 (> 기호)  : $('부모태그명 > 자식태그명')
        . 부모 바로 밑 직계 자식 만 대상으로 함
     - 모든 하위 선택자 (빈 칸)   : $('#id명 태그명')
        . 부모 밑 모든 자손 요소들을 대상으로 함
     - 다음 인접 선택자 (+ 기호)  : $('왼쪽형제태그명 + 오른쪽형제태그명')
        . 동등 계층에서, 자신포함 바로 다음 인접 형제 요소 만을 선택
     - 다음 형제 선택자 (~ 기호)  : $('왼쪽형제태그명 ~ 오른쪽형제태그명') 
        . 동등 계층에서, 자신 포함 뒤의 모든 일치하는 형제 요소들을 모두 선택

  ㅇ 속성 선택자 (찾는 속도가 다소 느림)
     -  $('태그명[속성명]')                 : 속성 존재 여부로 만 요소 선택
     -  $('태그명[속성명="완전일치속성"]')  : 속성 값이 일치 여부
     -  $('태그명[속성명*="부분일치속성"]') : 속성 값에 주어진 문자열의 포함 여부로 요소 선택
     -  $('태그명[속성명~="일치속성"]')     : 속성 값에 주어진 문자열이 단어로써 포함
     -  $('태그명[속성명|="일치속성"]')     : 속성 값에 주어진 문자열 그대로 포함 여부
                                              또는, 하이픈(-) 붙은 접두어로써 포함
     -  $('태그명[속성명!="일치속성"]')     : 속성 값이 존재 안하거나, 주어진 문자열과 불일치
     -  $('태그명[속성명^="시작일치속성"]') : 속성 값에 주어진 문자열로 시작하는 요소 선택
     -  $('태그명[속성명$="끝일치속성"]')   : 속성 값에 주어진 문자열로 끝나는 요소 선택

  ㅇ 필터 선택자 (찾는 속도가 다소 느림) 
     - 콜론(:) 기호로 시작하는 문자열 형식  ☞ 아래 3.항 참조
 

3. jQuery 필터 선택자 사용법 : $('선택자:필터형식')

  ㅇ 특정 아이템은 제거하고 필요한 것 만 걸러내는 것 
     -  콤머(:) 뒤에 필터 이름을 적음

  ㅇ 위치 필터
     -  :even  => 짝수번째(짝수 인덱스를 갖는) 엘리먼트 만 선택 (주의: 인덱스가 0부터 시작)
        . 例) $('tr:even')
     -  :odd   => 홀수번째(홀수 인덱스를 갖는) 엘리먼트 만 선택
     *  특히, odd,even 필터CSS 선택자에는 없는 유용한 기능 임

     -  :nth-child(index/even/odd/equation) => n번째 자식 요소를 선택 
        . (이때, 자식 순서는 1부터 시작)

     -  :first => 첫번째 엘리먼트 만 선택
     -  :last  => 마지막 엘리먼트 만 선택

     -  :eq(i) => i번째 요소를 선택 (주의: 인덱스 i는 0부터 시작)
     -  :gt(i) => i번째 이후의 요소를 선택
     -  :lt(i) => i번째 이전의 요소를 선택

  ㅇ 선택 필터
     -  폼 요소 선택
        . 폼 요소 선택             => :input, :text, :radio, :checkbox, :submit, :button 등
        . 폼 요소 상태에 따른 선택 => :selected, :checked, :disabled, :enabled, :focus 등
        . 例) $('input[type="radio"]:checked), 
              $('input[type="password"], input[type="text"]:disabled')

     -  header 요소 선택      => :header

     -  비 선택               => :not(원치않는선택자)
     -  포함된 것 만을 선택   => :has(내부포함선택자)
     -  텍스트 포함 선택      => :contains('텍스트')

     -  숨겨진 것 만을 선택   => :hidden
     -  보이는 것 만을 선택   => :visible


4. jQuery 상세 선택

  ㅇ 현재 선택된 요소 집합에서 더 좁혀 탐색

  ㅇ 조건 필터링 메서드
     * CSS 선택자에 의해 선택된 요소 집합 중에서,
        . 필터링에 의해 세부적으로 선택

     - $().first()   : 선택된 요소들 중 1번째 요소를 선택
     - $().last()    : 선택된 요소들 중 마지막 요소를 선택

     - $().filter()  : 선택된 요소들 중 선택 조건에 맞는 요소를 선택
        . filter( selector )
        . filter( function )
           .. Type: Function( Integer index, Element element ) => Boolean
        . filter( elements )
        . filter( selection )

     - $().has()     : 선택된 요소의 후손들 중 선택 조건에 맞는 요소를 선택
     - $().not()     : 선택된 요소 집합에서 일치하지 않는 요소들 만을 선택
        . 例) $("a").not("[data-id='1']") : a 요소들 중 data-id가 1이 아닌 요소를 선택

     - $().eq(index) : 선택된 요소들 중 index+1번째 요소를 선택
     - $().slice(start[,end]) : start+1 ~ end번째 요소를 선택

  ㅇ 조건 탐색 메서드 
     * 이미 선택된 요소를 기점으로, 
        . 어느 방향으로도 부모,형제,자식 노드를 접근하며 새로운 요소를 탐색

     - $().find( [Selector] )    : 현재 선택된 요소 내부에서 선택

     - $().parents( [Selector] ) : 모든 상위 요소들을 반환
     - $().parent( [Selector] )  : 가장 근접한 상위 요소 1개 만 반환
     - $().closest( [Selector] ) : 가장 근접한 상위 요소 1개 만 반환
        . 단, 특정한 요소부터 지정 가능

     - $().children( [Selector] ) : 자식 노드들을 반환

     - $().siblings( [Selector] ) : 인접한 형제 노드들을 반환

     - $().prev( [Selector] )     : 직전 형제 노드 만을 반환
     - $().prevAll( [Selector] )  : 이전 모든 노드들을 반환

     - $().next( [Selector] )     : 직후 형제 노드 만을 반환
     - $().nextAll( [Selector] )  : 이후 모든 형제 노드들을 선택

     - $().add( [Selector] ) : 선택되어 넘어온 요소 집합에 현재 선택한 요소 집합과의 합집합
     - $().addBack( [Selector] ) : 선택되어 넘어온 요소 집합에 현재 선택한 요소 집합과
                                   그 이전에 제외되었던 요소 집합도 추가하여 합집합
     - $().end( [Selector] ) : 직전 단계에서 선택되었던 요소를 선택 

     * [Selector] : (option) CSS 선택자


[jQuery] 1. jQuery 2. jQuery 요소 선택법 3. jQuery 활용 4. jQuery 이벤트 5. jQuery 화면 효과 6. jQuery 요소 삽입/삭제/교체/복사 7. jQuery ajax 8. jQuery 객체
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램, 프로그래밍
          2. 프로그래밍 기법
      1.   프로그래밍 언어론
      2.   구조적 프로그래밍
      3.   객체지향 프로그래밍
      4.   자료표현코드
      5.   자료구조
      6.   알고리즘
      7.   시스템 소프트웨어
      8.   프로그래밍언어 종류
            1. 프로그래밍 언어
        1.   C
        2.   C++
        3.   자바(Java)
        4.   자바스크립트
              1. JavaScript
              2. JS 기초 문법
          1.   JS 변수,타입
          2.   JS 연산자
          3.   JS 함수
          4.   JS 객체
          5.   JS 배열/Map/Set
          6.   JS 활용
          7.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
            2.   JS DOM 제어
            3.   JS 이벤트
            4.   Ajax
            5.   jQuery
              1.   1. jQuery
                  2. jQuery 요소 선택법
                  3. jQuery 활용
                  4. jQuery 이벤트
                  5. jQuery 화면 효과
                  6. jQuery 요소 삽입/삭제/교체/복사
                  7. jQuery ajax
                  8. jQuery 객체
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌