jQuery 활용


   

제이쿼리 활용

     (수정일:2018-06-11)

  [jQuery]   
  1. jQuery 주요 활용 분야
    1. 요소의 선택 ☞ jQuery 요소 선택 참조
    2. 이벤트 관리 ☞ jQuery 이벤트 참조
    3. 화면 효과내기 ☞ jQuery 화면 효과 참조 (컨텐츠 표시/숨김 등)
    4. 문서 구조의 변경 ☞ jQuery 요소 삽입/삭제/교체/복사 참조
    5. 요소의 조작
      1. 요소의 속성 조작 : 아래 2.번 항 참조
      2. 요소의 크기,위치 조작 : 아래 3.번 항 참조
      3. 요소의 스타일 조작 : 아래 4.번 항 참조
    6. 자료형 판단하기 : 아래 5.번 항 참조
    7. AJAX 구현 ☞ jQuery Ajax 참조
    8. 문서 요소의 내용(텍스트/HTML) 반환 및 지정 등
  2. 요소의 속성(Attribute, Property) 조작
    1. HTML 속성(Attribute) 조작
      1. $().attr('속성명',속성값) : HTML 요소속성(Attribute) 읽기 및 설정
        1. 속성 읽기 : attr('속성명')
        2. 개별 속성 설정 : attr('속성명','속성값')
        3. 다수 속성 설정 : attr({'속성명1':'값1', ... })
      2. $().removeAttr() : HTML 요소속성(Attribute) 삭제
      3. $().val() : value 속성(Attribute)의 읽기/쓰기
        1. $().val() : 선택된 요소의 단일 속성값 또는 목록값 읽기
        2. $().val('속성명') : 선택된 요소에서 지정된 속성값 읽기
        3. $().val(function) : 함수의 리턴값으로 value 속성값 쓰기
    2. DOM 속성(Property) 조작
      1. $().prop('속성명','속성값') : DOM 요소의 속성(Property) 읽기/쓰기
        1. $().prop('속성명') : 선택된 요소에서 지정된 속성값 읽기
        2. $().prop('속성명','속성값') : 선택된 요소의 속성속성값 쓰기
  3. 요소의 크기 및 위치 조작
    1. 요소의 크기 (outerHeight,outerWidth,innerHeight,innerWidth,height,width)
      1. $().height() : 요소의 높이 값을 직접 반환/설정하기
      2. $().weight() : 요소의 넓이 값을 직접 반환/설정하기
      3. $().innerHeight() : 요소의 내부 높이의 값을 반환하기
      4. $().outerHeight() : 요소의 외부 높이의 값을 반환하기
      5. $().innerWeight() : 요소의 내부 폭의 값을 반환하기
      6. $().outerWeight() : 요소의 외부 폭의 값을 반환하기
    2. 요소의 위치
      1. $().offset : 페이지 전체를 기준으로 위치값(절대 좌표)
      2. $().position : 부모 태그를 기준으로 위치값(상대 좌표)
  4. 요소의 스타일 조작
    1. CSS 속성 조정에 의한 스타일 조작
      1. $().css() : HTML 요소에 담겨진 CSS 속성 읽기 및 설정
        1. 개별 속성 설정 : css('속성명','값')
        2. 다수 속성 설정 : css({'속성명1':'값1', ... })
        3. CSS 속성 제거 : css('속성명','')
    2. 클래스 조정에 의한 스타일 조작
      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. 요소의 내용(텍스트/HTML) 반환 및 지정
    1. $().text()
      1. 대상 : $()로 읽은 요소 아래의 모든 텍스트
      2. 반환 : 주어진 텍스트로 치환 또는 해당 요소의 텍스트를 반환
      3. 특징 : HTML 태그문자열로써 표시
    2. $().html()
      1. 대상 : $()로 읽은 최초 요소 만
      2. 반환 : 주어진 HTML으로 치환 또는 해당 요소의 HTML를 반환
      3. 특징 : HTML 태그태그로써 처리함 (이를 통해 HTML를 타 요소에 복사도 가능)
  7. 기타
    1. each() : 선택된 jQuery 객체 내의 여러 요소들을 순회하며 특정 작업 수행
      1. 파라미터에는 DOM 객체에 대해 수행할 익명 함수 또는 콜백 함수를 넣음
        1. 例) $().each(수행할 익명 함수 또는 콜백 함수);
    2. 요소의 갯수 구하기
      1. $().length : 선택된 요소의 갯수
    3. 요소의 번호(index) 구하기
      1. $().index(대상요소) : 선택된 여러 요소들 중 대상 요소(this 등)의 번호
    4. $().data() : 제이쿼리 객체정보를 저장 가능
    5. $().trim() : 공백문자 제거

[jQuery]
1. jQuery 2. jQuery 요소 선택법 3. jQuery 활용 4. jQuery 이벤트 5. jQuery 화면 효과 6. jQuery 요소 삽입/삭제/교체/복사 7. jQuery ajax

       최근수정이력     PC 화면