jQuery 활용

(2018-08-22)

제이쿼리 활용

1. jQuery 주요 활용 분야

  ㅇ 요소의 선택         ☞ jQuery 요소 선택 참조
  ㅇ 이벤트 관리         ☞ jQuery 이벤트 참조
  ㅇ 화면 효과내기       ☞ jQuery 화면 효과 참조 (컨텐츠 표시/숨김 등)
  ㅇ 문서 구조의 변경    ☞ jQuery 요소 삽입/삭제/교체/복사 참조
  ㅇ 요소의 조작
     - 요소의 속성 조작      : 아래 2.번 항 참조
     - 요소의 스타일 조작    : 아래 3.번 항 참조
     - 요소의 크기,위치 조작 : 아래 4.번 항 참조
  ㅇ 자료형 판단하기     : 아래 5.번 항 참조
  ㅇ AJAX 구현           ☞ jQuery Ajax 참조
  ㅇ 문서 요소의 내용(텍스트/HTML) 반환 및 지정 등


2. 요소의 속성(Attribute, Property) 조작HTML 속성(Attribute) 조작
     - $().attr('속성명',속성값) : HTML 요소의 속성(Attribute) 읽기 및 설정
        . 속성 읽기      : attr('속성명')
        . 개별 속성 설정 : attr('속성명','속성값')
        . 다수 속성 설정 : attr({'속성명1':'값1', ... })

     - $().removeAttr()  : HTML 요소의 속성(Attribute) 삭제

     - $().val() : value 속성(Attribute)의 읽기/쓰기
        . $().val()         : 선택된 요소의 단일 속성값 또는 목록값 읽기
        . $().val('속성명') : 선택된 요소에서 지정된 속성값 읽기
        . $().val(function) : 함수의 리턴값으로 value 속성값 쓰기

  ㅇ DOM 속성(Property) 조작
     - $().prop('속성명','속성값') : DOM 요소의 속성(Property) 읽기/쓰기
        . $().prop('속성명') : 선택된 요소에서 지정된 속성값 읽기
        . $().prop('속성명','속성값') : 선택된 요소의 속성속성값 쓰기


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

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


4. 요소의 크기 및 위치 조작

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

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

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


5. 요소의 자료형 판단하기

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


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

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

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


7. 기타

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

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

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

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

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


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

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