jQuery 요소 선택

     (수정일:2017-11-20)

  [jQuery]   
  1. jQuery에 의한 HTML 요소/노드의 선택/추출
    1. jQuery() 또는 $() 함수CSS 선택자 형식을 전달하여, 이에 매칭하는 요소들을 선택
      1. HTML 문서 트리에 대해 () 안에 언급된 1 이상의 매칭 요소를 추출 ☞ CSS 선택자 참조
  2. jQuery 선택자 사용법 : $('선택자')
    1. 기본 선택자 (*,id,class,태그 선택자)
      1. $('*') : 모든 요소 선택, $('#id명'), $('.class명'), $('태그명')
    2. 조합 선택자 (, 및 #)
      1. OR 선택자 : $('#id명_1, #id명_2, #id명_3, ... ')
      2. AND 선택자 : $('태그명#id명') => 해당 태그명에 해당 id명이 동시에 부합되는 것
    3. 계층 선택자
      1. 직계 자식 선택자 (> 기호) : $('부모태그명 > 자식태그명')
      2. 하위 선택자 (빈 칸) : $('#id명 태그명')
      3. 다음 인접 선택자 (+ 기호) : $('왼쪽형제태그명1 + 오른쪽형제태그명2')
        1. 바로 다음 인접 요소 만 선택
      4. 다음 형제 선택자 (~ 기호) : $('왼쪽형제태그명1 ~ 오른쪽형제태그명')
        1. 다음 형제 요소 모두 선택
    4. 속성 선택자 (찾는 속도가 다소 느림)
      1. $('태그명[속성명]') : 속성 존재 여부로 만 요소 선택
      2. $('태그명[속성명="완전일치속성"]') : 속성 값이 일치 여부
      3. $('태그명[속성명*="부분일치속성"]') : 속성 값에 주어진 문자열의 포함 여부로 요소 선택
      4. $('태그명[속성명~="일치속성"]') : 속성 값에 주어진 문자열이 단어로써 포함
      5. $('태그명[속성명|="일치속성"]') : 속성 값에 주어진 문자열 그대로 포함 여부 또는, 하이픈(-) 붙은 접두어로써 포함
      6. $('태그명[속성명!="일치속성"]') : 속성 값이 존재 안하거나, 주어진 문자열과 불일치
      7. $('태그명[속성명^="시작일치속성"]') : 속성 값에 주어진 문자열로 시작하는 요소 선택
      8. $('태그명[속성명$="끝일치속성"]') : 속성 값에 주어진 문자열로 끝나는 요소 선택
  3. jQuery 필터 선택자
    1. 특정 아이템은 제거하고 필요한 것 만 걸러내는 것
      1. . 콤머(:) 뒤에 필터 이름을 적음
        1. 콤머(:) 뒤에 필터 이름을 적음
    2. 순서 필터
      1. :even : 짝수번째(짝수 인덱스를 갖는) 엘리먼트 만 선택, 例) $('tr:even')
      2. :odd : 홀수번째(홀수 인덱스를 갖는) 엘리먼트 만 선택
      3. :first : 첫번째 엘리먼트 만 선택
      4. :last : 마지막 엘리먼트 만 선택
    3. 선택 필터
      1. 폼 요소 선택 => :input, :text, :radio, :checkbox, :submit, :button 등
      2. header 요소 선택 => :header
      3. 비 선택 => :not(원치않는선택자)
      4. 포함된 것 만을 선택 => :has(내부포함선택자)
      5. 텍스트 포함 선택 => :contains('텍스트')
      6. 숨겨진 것 만을 선택 => :hidden
      7. 보이는 것 만을 선택 => :visible
  4. jQuery 상세 선택
    1. 현재 선택된 요소 집합에서 더 좁혀 탐색
      1. 선택자와는 달리, 이미 선택된 요소를 기점으로 새로운 요소를 탐색
    2. 조건 필터링 메서드
      1. $().first() : 선택된 요소들 중 1번째 요소를 선택
      2. $().last() : 선택된 요소들 중 마지막 요소를 선택
      3. $().filter() : 선택된 요소들 중 선택 조건에 맞는 요소를 선택
      4. $().has() : 선택된 요소의 후손들 중 선택 조건에 맞는 요소를 선택
      5. $().not() : 선택된 요소 집합에서 일치하지 않는 요소들 만을 선택
      6. $().eq(index) : 선택된 요소들 중 index+1번째 요소를 선택
      7. $().slice(start[,end]) : start+1 ~ end번째 요소를 선택
    3. 조건 탐색 메서드
      1. $().find() : CSS 셀렉터와 일치하는 요소들을 반환 (현재 선택된 요소 내부에서 선택)
      2. $().parents() : 모든 상위 요소들을 반환
      3. $().parent() : 가장 근접한 상위 요소 1개 만 반환
      4. $().closest() : 가장 근접한 상위 요소 1개 만 반환 (특정한 요소부터 지정 가능)

[jQuery]
1. jQuery 2. jQuery 요소 선택법 3. jQuery 활용 4. jQuery 이벤트 5. jQuery 화면 효과

       최근수정이력     PC 화면