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

 
        최근수정     참고문헌