jQuery 요소 선택

(2018-06-11)
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. jQuery 필터 선택자 사용법 : $('선택자:필터형식')

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

  ㅇ 순서 필터
     -  :even  : 짝수번째(짝수 인덱스를 갖는) 엘리먼트 만 선택, 例) $('tr:even')
     -  :odd   : 홀수번째(홀수 인덱스를 갖는) 엘리먼트 만 선택
     -  :first : 첫번째 엘리먼트 만 선택
     -  :last  : 마지막 엘리먼트 만 선택

  ㅇ 선택 필터
     -  폼 요소 선택        => :input, :text, :radio, :checkbox, :submit, :button 등
     -  header 요소 선택    => :header
     -  비 선택             => :not(원치않는선택자)
     -  포함된 것 만을 선택 => :has(내부포함선택자)
     -  텍스트 포함 선택    => :contains('텍스트')
     -  숨겨진 것 만을 선택 => :hidden
     -  보이는 것 만을 선택 => :visible


4. jQuery 상세 선택

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

  ㅇ 조건 필터링 메서드
     * CSS 선택자에 의해 선택된 요소 집합 중에서, 필터링에 의해 선택
     - $().first()   : 선택된 요소들 중 1번째 요소를 선택
     - $().last()    : 선택된 요소들 중 마지막 요소를 선택

     - $().filter()  : 선택된 요소들 중 선택 조건에 맞는 요소를 선택
     - $().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] )  : 이후 모든 형제 노드들을 선택

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


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

 
        최근수정     요약목록(시험중)     참고문헌