jQuery 요소 선택

(2017-06-24)
정보기술(IT) 1. 정보기술

전산기초
컴퓨터구조
프로그래밍
데이터베이스
소프트웨어 공학
운영체제
정보보호/보안
IT 기타기술
 > 프로그래밍프로그래밍 언어론
객체지향
자료구조
알고리즘
자료표현(알파벳/코드)
시스템 프로그래밍
프로그래밍언어 종류
프로그래밍 기타일반
 > 프로그래밍언어 종류 1. 프로그래밍 언어
2. 기계어,어셈블리언어

C/C++
자바(Java)
자바스크립트
 > 자바스크립트 1. JavaScript
2. JS 객체
3. JS 변수,타입
4. JS 함수
5. JS 배열

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

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

  ㅇ 선택자 사용법 : $(’선택자’)
     - id,class,태그 선택자      : $(’#id명’), $(’.class명’), $(’태그명’)
     - 하위 선택자 (빈 칸)       : $(’#id명 태그명’)
     - 자식 선택자 (> 기호)      : $(’부모태그명 > 자식태그명’)
     - 인접 형제 선택자 (+ 기호) : $(’왼쪽형제태그명1 + 오른쪽형제태그명2’)

     - 속성 선택자
        . $(’태그명[속성명]’), 
        . $(’태그명[속성명="완전일치속성"]’),
        . $(’태그명[속성명^="시작일치속성"]’),
        . $(’태그명[속성명$="끝일치속성"]’),
        . $(’태그명[속성명*="부분일치속성"]’),
 
  ㅇ 선택용 필터
     - 특정 아이템은 제거하고 필요한 것 만 걸러내는 것 
        . 콤머(:) 뒤에 필터 이름을 적음
     - 순서 필터
        . :even  : 짝수번째(짝수 인덱스를 갖는) 엘리먼트 만 선택, 例) $(’tr:even’)
        . :odd   : 홀수번째(홀수 인덱스를 갖는) 엘리먼트 만 선택
        . :first : 첫번째 엘리먼트 만 선택
        . :last  : 마지막 엘리먼트 만 선택
     - 선택 필터
        . 폼 요소 선택        => :input, :text, :radio, :checkbox, :submit, :button 등
        . header 요소 선택    => :header
        . 비 선택             => :not(원치않는선택자)
        . 포함된 것 만을 선택 => :has(내부포함선택자)
        . 텍스트 포함 선택    => :contains(’텍스트’)
        . 숨겨진 것 만을 선택 => :hidden
        . 보이는 것 만을 선택 => :visible

  ㅇ 현재 선택된 요소 집합에서 더 좁혀 탐색
     - find()    : CSS 셀렉터와 일치하는 요소들을 반환 (현재 선택된 요소 내부에서 선택)
     - closest() : CSS 셀렉터와 일치하는 요소와 가장 근접한 상위요소들을 반환

     - 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 화면 효과  

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