jQuery 요소 선택

(2017-11-13)
1. jQuery에 의한 HTML 요소/노드의 선택/추출jQuery() 또는 $() 함수CSS 선택자 형식을 전달하여, 이에 매칭하는 요소들을 선택
     - HTML 문서 트리에 대해 () 안에 언급된 1 이상의 매칭 요소를 추출  ☞ CSS 선택자 참조


2. jQuery 선택자 사용법 : $('선택자')

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

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

  ㅇ 계층 선택자
     - 직계 자식 선택자 (> 기호)  : $('부모태그명 > 자식태그명')
     - 하위 선택자      (빈 칸)   : $('#id명 태그명')
     - 다음 인접 선택자 (+ 기호)  : $('왼쪽형제태그명1 + 오른쪽형제태그명2')
        . 바로 다음 인접 요소 만 선택
     - 다음 형제 선택자 (~ 기호)  : $('왼쪽형제태그명1 ~ 오른쪽형제태그명') 
        . 다음 형제 요소 모두 선택

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

3. jQuery 필터 선택자

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

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

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


4. jQuery 상세 선택

  ㅇ 현재 선택된 요소 집합에서 더 좁혀 탐색
     - 선택자와는 달리, 이미 선택된 요소를 기점으로 새로운 요소를 탐색

  ㅇ 주요 종류
     - $().find() : CSS 셀렉터와 일치하는 요소들을 반환 (현재 선택된 요소 내부에서 선택)

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

     - $().eq(index) : index+1번째 요소를 선택
     - $().slice(start[,end]) : start+1 ~ end번째 요소를 선택
     - $().not(exp) : 선택된 요소 집합에서 일치하지 않는 요소 선택
     - $().has(exp) : 선택된 요소들에서 자식 요소를 갖는 요소를 선택


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

 
        최근수정     모바일웹     참고문헌