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() : 공백문자 제거