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 객체  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"