jQuery 활용

(2017-09-04)

제이쿼리 활용

1. jQuery 주요 활용 분야이벤트 관리                          ☞ jQuery 이벤트 참조
  ㅇ 화면 효과내기 (컨텐츠 표시/숨김 등)  ☞ jQuery 화면 효과 참조
  ㅇ 노드 접근하기
  ㅇ 문서 구조의 변경
  ㅇ 스타일 조작, 속성 조작, 클래스 조작
  ㅇ 자료형 판단하기
  ㅇ 문서 요소의 내용(텍스트/HTML) 반환 및 지정 등


2. 부모,형제,자식 노드 접근하기

  ㅇ parent(), parents()
  ㅇ children() : 자식 노드들에 접근
  ㅇ siblings() : 인접한 형제 노드들에 접근
  ㅇ prev()     : 이전 형제 노드 접근
  ㅇ prevAll()  : 이전 모든 노드들을 선택
  ㅇ next()     : 다음 형제 노드 접근
  ㅇ nextAll()  : 다음 모든 노드들을 선택


3. 문서 구조의 변경

  ㅇ 요소/노드 생성,추가
     - $(삽입 위치).메소드(삽입할 요소)
        . before()  : 타깃 앞에 삽입
        . after()   : 타깃 뒤에 삽입
        . prepend() : 타깃의 자식요소 맨 앞에 삽입
        . append()  : 타깃의 자식요소 맨 끝에 삽입

     - $(삽입할 요소).메소드(삽입 위치)
        . insertBefore() : 타깃 앞에 삽입
        . insertAfter()  : 타깃 뒤에 삽입
        . prependTo()    : 타깃의 자식요소 맨 앞에 삽입
        . appendTo()     : 타깃의 자식요소 맨 끝에 삽입

  ㅇ 요소/노드 삭제
     - remove() : 요소를 제거하고 웹브라우저 메모리에서도 이의 할당을 제거

  ㅇ 요소/노드 교체
     - replace()
     - replaceWith() : 타깃 요소의 내용 또는 새로운 요소 객체로 교체

  ㅇ 요소/노드 복사
     - clone() : 새 위치에 요소를 복사하기 위해 먼저 복제본을 만듬


4. 스타일 조작, 속성 조작, 클래스 조작HTML 속성 조작
     - $().attr('속성명',속성값)        : 요소의 속성 읽기 및 설정
        . 속성 읽기      : attr('속성명')
        . 개별 속성 설정 : attr('속성명',속성값)
        . 다수 속성 설정 : attr({'속성명1:값1', ... })
     - $().removeAttr()  : 요소의 속성 제거하기

  ㅇ CSS 속성 조작 (스타일 조작)
     - $().css()       : HTML 요소에 담겨진 CSS 속성 읽기 및 설정
        . 개별 속성 설정 : css('속성명','값')
        . 다수 속성 설정 : css({'속성명1:값1', ... })
        . CSS 속성 제거  : css('속성명','')

  ㅇ 요소의 크기 및 위치 조작
     - 요소의 크기 (outerHeight,outerWidth,innerHeight,innerWidth,height,width)
        . $().height()       : 요소의 높이 값을 직접 반환/설정하기
        . $().weight()       : 요소의 넓이 값을 직접 반환/설정하기

        . $().innerHeight()  : 요소의 내부 높이의 값을 반환하기
        . $().outerHeight()  : 요소의 외부 높이의 값을 반환하기
        . $().innerWeight()  : 요소의 내부 폭의 값을 반환하기
        . $().outerWeight()  : 요소의 외부 폭의 값을 반환하기
     - 요소의 위치 

  ㅇ 클래스 조작
     - $().addClass()    : 요소에 특정 클래스를 추가
     - $().removeClass() : 요소에서 특정 클래스를 제거
     - $().toggleClass() : 요소에서 특정 클래스의 추가/제거를 토글함
        . 예를들면 클릭시 마다, 이미지 변경, 색상 등 스타일 변경
     - $().hasClass()    : 요소에서 해당 클래스의 존재 유무 (있음: true,없음: false 반환)


5. 자료형 판단하기

  ㅇ $().type()          : 자료형 판단하기
  ㅇ $().isArray()       : 배열 여부 판단하기
  ㅇ $().isEmptyObject() : 비어있음 여부 판단하기
  ㅇ $().isFunction()    : 함수 여부 판단하기
  ㅇ $().isNumeric()     : 수치 여부 판단하기
  ㅇ $().isPlainObject() : Object 객체 여부 판단하기
  ㅇ $().isWindow()      : Window 객체 여부 판단하기
  ㅇ $().isXMLDoc()      : XML 문서 부 판단하기


6. 문서 요소의 내용(텍스트/HTML) 반환 및 지정

  ㅇ $().text()
     - 대상 : $()로 읽은 요소 아래의 모든 텍스트
     - 주어진 텍스트로 치환 또는 해당 요소의 텍스트를 반환
     - HTML 태그문자열로써 표시

  ㅇ $().html()
     - 대상 : $()로 읽은 최초 요소 만
     - 주어진 HTML으로 치환 또는 해당 요소의 HTML를 반환 
     - HTML 태그태그로써 처리함 (이를 통해 HTML를 타 요소에 복사도 가능)


7. 기타

  ㅇ each() : 선택된 jQuery 객체 내의 여러 요소들을 순회하며 특정 작업 수행
     - 파라미터에는 DOM 객체에 대해 수행할 익명 함수 또는 콜백 함수를 넣음
        . 例) $().each(수행할 익명 함수 또는 콜백 함수);

  ㅇ 요소의 위치 구하기
     - $().offset   : 페이지 전체를 기준으로 위치값(절대 좌표)
     - $().position : 부모 태그를 기준으로 위치값(상대 좌표)

  ㅇ 요소의 갯수 구하기
     - $().length   : 선택된 요소의 갯수

  ㅇ 요소의 번호(index) 구하기
     - $().index(대상요소)   : 선택된 여러 요소들 중 대상 요소(this 등)의 번호

  ㅇ $().data() : 제이쿼리 객체정보를 저장 가능

  ㅇ $().trim() : 공백문자 제거


[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.   기술경영

 
        최근수정     참고문헌