jQuery 활용, 제이쿼리 활용

     (수정일:2017-06-24)

  [jQuery]   
  1. jQuery 주요 활용 분야
    1. 이벤트 관리 ☞ jQuery 이벤트 참조
    2. 화면 효과내기 (컨텐츠 표시/숨김 등) ☞ jQuery 화면 효과 참조
    3. 노드 접근하기
    4. 문서 구조의 변경
    5. 스타일 조작, 속성 조작, 클래스 조작
    6. 자료형 판단하기
    7. 문서 요소의 내용 반환 및 지정 등
  2. 부모,형제,자식 노드 접근하기
    1. parent(), parents()
    2. children()
    3. siblings()
    4. prev() : 이전 형제노드 접근, prevtAll()
    5. next() : 다음 형제노드 접근, nextAll()
  3. 문서 구조의 변경
    1. 요소/노드 생성,추가
      1. $(삽입 위치).메소드(삽입할 요소)
        1. before() : 타깃 앞에 삽입
        2. after() : 타깃 뒤에 삽입
        3. prepend() : 타깃의 자식요소 앞에 삽입
        4. append() : 타킥의 자식요소 끝에 삽입
      2. $(삽입할 요소).메소드(삽입 위치)
        1. insertBefore()
        2. insertAfter()
        3. prependTo()
        4. appendTo()
    2. 요소/노드 삭제
      1. remove()
    3. 요소/노드 교체
      1. replace()
      2. replaceWith() : 타깃의 내용 교체
    4. 요소/노드 복사
      1. clone() : 새 위치에 요소를 복사하기 위해 먼저 복제본을 만듬
  4. 스타일 조작, 속성 조작, 클래스 조작
    1. html 속성 조작
      1. $().attr(’속성명’,속성값) : 요소의 속성 읽기/설정하기
        1. 1 이상의 속성을 한 번에 설정도 가능
      2. $().removwAttr() : 요소의 속성 제거하기
    2. css 속성 조작 (스타일 조작)
      1. $().css() : 요소에 담겨진 CSS 속성 값의 반환 및 설정
        1. 개별 속성 설정 : css(’프로퍼티명’,’값’)
        2. 다수 속성 설정 : css({’프로퍼티명1:값1’, ... })
    3. 요소의 크기 및 위치 조작
      1. 요소의 크기 (outerHeight,outerWidth,innerHeight,innerWidth,height,width)
        1. $().height() : 요소의 높이 값을 직접 반환/설정하기
        2. $().weight() : 요소의 넓이 값을 직접 반환/설정하기
      2. 요소의 위치
    4. 클래스 조작
      1. $().addClass() : 요소에 특정 클래스를 추가
      2. $().removeClass() : 요소에서 특정 클래스를 제거
      3. $().toggleClass() : 요소에서 특정 클래스의 추가/제거를 토글함
        1. 예를들면 클릭시 마다, 이미지 변경, 색상 등 스타일 변경
      4. $().hasClass() : 요소에서 해당 클래스의 존재 유무 (있음: true,없음: false 반환)
  5. 자료형 판단하기
    1. $().type() : 자료형 판단하기
    2. $().isArray() : 배열 여부 판단하기
    3. $().isEmptyObject() : 비어있음 여부 판단하기
    4. $().isFunction() : 함수 여부 판단하기
    5. $().isNumeric() : 수치 여부 판단하기
    6. $().isPlainObject() : Object 객체 여부 판단하기
    7. $().isWindow() : Window 객체 여부 판단하기
    8. $().isXMLDoc() : XML 문서 부 판단하기
  6. 문서 요소의 내용 반환 및 지정
    1. $().text()
      1. 대상 : $()로 읽은 요소 아래의 모든 텍스트
      2. 주어진 텍스트로 치환 또는 해당 요소의 텍스트를 반환
      3. HTML 태그문자열로써 표시
    2. $().html()
      1. 대상 : $()로 읽은 최초 요소 만
      2. 주어진 HTML으로 치환 또는 해당 요소의 HTML를 반환
      3. HTML 태그태그로써 처리함 (이를 통해 HTML를 타 요소에 복사도 가능)
  7. 기타
    1. each() : 선택된 jQuery 객체 내의 여러 요소들을 순회하며 특정 작업 수행
      1. 파라미터에는 DOM 객체에 대해 수행할 익명 함수 또는 콜백 함수를 넣음
        1. 例) $().each(수행할 익명 함수 또는 콜백 함수);
    2. $().data() : 제이쿼리 객체정보를 저장 가능
    3. $().trim() : 공백문자 제거

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

       최근수정이력     PC 화면