jQuery 활용, 제이쿼리 활용

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

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

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

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

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


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

  ㅇ parent(), parents()
  ㅇ children()
  ㅇ siblings()
  ㅇ prev() : 이전 형제노드 접근, prevtAll()
  ㅇ next() : 다음 형제노드 접근, nextAll()


3. 문서 구조의 변경

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

  ㅇ 요소/노드 삭제
     - remove()

  ㅇ 요소/노드 교체
     - replace()
     - replaceWith() : 타깃의 내용 교체

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


4. 스타일 조작, 속성 조작, 클래스 조작

  ㅇ html 속성 조작
     - $().attr(’속성명’,속성값)        : 요소의 속성 읽기/설정하기
        . 1 이상의 속성을 한 번에 설정도 가능
     - $().removwAttr()  : 요소의 속성 제거하기

  ㅇ css 속성 조작 (스타일 조작)
     - $().css()       : 요소에 담겨진 CSS 속성 값의 반환 및 설정
        . 개별 속성 설정 : css(’프로퍼티명’,’값’)
        . 다수 속성 설정 : css({’프로퍼티명1:값1’, ... })

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

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


5. 자료형 판단하기

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


6. 문서 요소의 내용 반환 및 지정

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

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


7. 기타

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

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

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


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

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