home

jQuery Description

Selectors

기본필터 선택자(Basic Filters)

속성 설명
:animated 애니메이션 태그를 선택
:eq(index) 인덱스 번호를 통해 선택
:even 짝수 요소 선택
:odd 홀수 번째 요소 선택
:first 첫 번째 요소 선택
:last 마지막 번째 요소 선택
:gt(index) 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그 선택
:lt(index) 선택된 태그에서 인덱스보다 작은 인덱스를 가지고 있는 태그를 선택
:header 제목요소(h1~h6) 태그들을 선택
:lang() 언어 속성이 설정된 태그 선택
:not() 선택한 요소의 반대 요소 선택
:root 문서의 루트 요소 선택
:target 이벤트를 발생한 타겟 선택

내용필터 선택자(Content Filters)

속성 설명
:contains() 텍스트와 일치하는 문자열의 요소 선택
:empty 텍스트가 없는 요소 선택
:parent 텍스트가 있는 요소 선택
:has() 찾고 싶은 태그를 후손까지 살펴본 후 선택

보임필터 선택자(Visibility Filters)

속성 설명
:hidden 보이지 않는 요소 선택
:visible 텍스트가 있는 요소 선택

속성 선택자(Attribute)

속성 설명
[name|="value"] 속성 중에 "value"와 일치하는 문자열 태그 선택
[name*="value"] 속성 중에 "value"가 포함되어 있는 태그 선택
[name~="value"] 속성 중에 "value"가 포함된 특정된 태그 선택
[name$="value"] 속성 중에 "value"로 끝나는 태그 선택
[name="value"] 속성 중에 "value"와 일치하는 태그 선택
[name!="value"] 속성 중에 "value"와 일치하는 않는 태그 선택
[name^="value"] 속성 중에 "value"로 시작하는 태그 선택
[name] 속성을 가진 태그 선택
[name],[name] 두가지 속성을 가진 태그 선택

자식필터 선택자(Child Filters)

속성 설명
:first-child 첫 번째 자식 요소 선택
:last-child 마지막 번째 자식 요소 선택
:nth-child(index) 인덱스 번째에 있는 자식 요소 선택
:nth-last-child(index) 마지막 인덱스 번째에 있는 자식 요소 선택
:only-child 자식 요소가 오직 하나인 요소 선택
:first-of-type 번째 자식 요소 유형을 선택
:last-of-type 마지막 번째 자식 요소 유형을 선택
:nth-of-type(index) 인덱스 번째 자식 유형을 선택
:nth-last-of-type(index) 마지막 인덱스 번째 자식 요소 유형을 선택
:only-of-type 자식 요소 유형이 오직 하나인 요소 선택

폼 선택자(Forms)

속성 설명
:button 버튼 입력 양식 선택
:checkbox 체크 박스 입력 양식 선택
:checked 체크된 입력 양식 선택
:disabled 사용 불가능한 입력 양식 선택
:enabled 사용 가능한 입력 양식 선택
:focus 포커스된 입력 양식 선택
:file 파일 업로드 양식 선택
:image 이미지 입력 양식 선택
:input 모든 입력 양식 선택
:password 암호 입력 양식 선택
:radio 라디오 버튼 입력 양식 선택
:reset 리셋 입력 양식 선택
:selected 선택된 입력 양식 선택
:submit 데이터 보내기 입력 양식 선택
:text 텍스트 박스 양식 선택

Attributes

Attributes

속성 설명
.attr() HTML 요소의 속성 값을 설정하거나 반환
.removeAttr() HTML 요소에서 하나 이상의 속성을 제거
.prop() JavaScript 요소의 속성 값을 설정하거나 반환
.removeProp() JavaScript 요소에서 하나 이상의 속성을 제거
.val() 폼 요소의 속성 값을 설정하거나 반환

CSS

속성 설명
.addClass() 하나 이상의 클래스를 추가
.removeClass() 하나 이상의 클래스를 제거
.hasClass() 선택한 요소 중 지정된 클래스가 있는지 확인
.toggleClass() 하나 이상의 클래스를 추가/제거
.css() 스타일 속성을 설정하거나 반환

Dimensions

속성 설명
.width() 가로를 설정하거나 반환
.innerWidth() 가로 폭(패딩 포함, 보더 불포함)을 반환
.outerWidth() 가로(패딩, 보더 포함)를 반환
.height() 높이를 설정하거나 반환
.innerHeight() 높이(패딩 포함, 보더 불포함)를 반환
.outerHeight() 높이(패딩, 보더 포함)를 반환

Offset

속성 설명
.offset() 좌표 값(문서 기준)을 설정하거나 반환
.offsetParent() 부모 좌표 값(문서 기준)을 반환
.position() 좌표 값을 반환
.scrollLeft() 가로 스크롤 값을 설정하거나 반환
.scrollTop() 세로 스크롤 값을 설정하거나 반환

Data

속성 설명
.data() 선택한 요소의 data- 속성 값을 설정하거나 반환
.removeData() 선택한 요소의 data- 속성 값을 삭제

Manipulation

Copying

속성 설명
.clone() 선택한 요소 본사본을 생성

DOM Insertion, Around

속성 설명
.wrap() 선택한 요소에 부모 요소 추가
.wrapAll() 선택한 모든 요소를 묶어 부모 요소 추가
.wrapInner() 선택한 요소에 자식 요소 추가

DOM Insertion, Inside

속성 설명
.append() 선택한 요소 마지막 위치에 새로운 요소 추가
.appendTo() 선택한 타겟 마지막 위치에 새로운 요소 추가
.html() 선택한 요소 내부의 HTML을 읽거나 추가
.prepend() 선택한 요소 처음 위치에 새로운 요소 추가
.prependTo() 선택한 타겟 처음 위치에 새로운 요소 추가
.text() 선택한 요소 내부의 텍스트를 읽거나 추가

DOM Insertion, Outside

속성 설명
.after() 선택한 요소 다음에 새로운 요소 추가
.before() 선택한 요소 이전에 새로운 요소 추가
.insertAfter() 선택한 타겟 요소 다음에 새로운 요소 추가 ($('<div>after'</div>').insertAfter('div');)
.insertBefore() 선택한 타겟 요소 이전에 새로운 요소 추가

DOM Removal

속성 설명
.detach() 선택한 요소(데이터 및 이벤트 불포함) 제거
.empty() 선택한 요소의 하위 요소 제거
.remove() 선택한 요소(데이터 및 이벤트 포함) 제거
.unwrap() 선택한 요소의 부모요소 제거

DOM Replacement

속성 설명
.replaceAll() 선택한 요소를 새로운 요소로 바꿈
.replaceWith() 선택한 요소를 새로운 컨텐츠로 바꿈 ($('h1').replaceWith('<p class="a"></p>'));)

Traversing

필터링(Filtering)

속성 설명
.eq(index) 선택한 요소의 인덱스 번호를 갖는 요소 반환
.filter() 선택된 요소에서 한 번 더 필터링하여 요소를 선택
.first() 선택한 요소의 첫 번째 요소 반환
.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾음
.is() 선택한 요소의 상태가 지정한 속성과 일치하면 true 반환
.last() 선택한 요소의 마지막 요소 반환
.map() 배열의 데이터를 변환시켜 새로운 배열 객체 생성
.not() 선택한 요소 중 지정한 요소만 제외하고 선택
.slice(index, index) 메서드는 선택한 요소에 지정한 인덱스를 선택

기타(Miscellaneous Traversing)

속성 설명
.add() 선택한 요소에 새로운 요소 추가
.addBack() 선택한 요소의 상위 요소도 같이 선택
.contents() 선택한 요소의 하위 콘텐츠 선택
.each() 선택한 여러 요소들을 각각 순차적으로 실행
.end() 필터링이 일어나기 이전의 요소를 선택

트리구조 탐색(Tree Traversal)

속성 설명
.closest() 선택한 요소의 상위 요소 중 가장 가까운 요소 선택
.parent() 선택한 요소의 부모 요소 선택
.parents() 선택한 요소의 부모 요소중 가장 상단 요소 선택
.children() 선택한 요소의 모든 자식 선택
.siblings() 선택한 요소의 모든 형제 요소 선택
.find() 선택한 요소에서 조건에 맞는 요소 다시 선택
.next() 선택한 요소의 다음 요소
.nextAll() 선택한 요소의 다음 요소 모두 선택
.nextUntil() 지정한 선택 요소의 모든 요소 선택
.prev() 선택한 요소의 이전 요소 선택
.prevAll() 선택한 요소의 이전 모든 요소 선택
.parentsUntil() 지정한 선택 요소의 모든 부모 요소 선택
.prevUntil() 지정한 선택 요소의 이전 모든 요소 선택

Effect

Basic

속성 설명
.hide() 선택한 요소 숨김
.show() 선택한 요소 노출
.toggle() 선택한 요소 숨김/노출

custom

속성 설명
.animate() 선택한 요소에 애니메이션 적용 [:not(:animated)]
.clearQueue() 첫 번째 큐만 실행, 나머지 대기 중인 큐 모두 삭제
.delay() 애니메이션 효과 지연
.dequeue() 스택에 쌓인 큐 모두 제거
.finish() 선택한 요소의 진행중인 애니메이션 강제 종료
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가
.stop() 실행중인 애니메이션 정지

Fading

속성 설명
.fadeIn() 선택한 요소를 천천히 노출
.fadeOut() 선택한 요소를 천천히 숨김
.fadeTo() 선택한 요소 투명도 조절
.fadeToggle() 선택한 요소를 천천히 숨김/노출

Event

Event Handler Attachment

속성 설명
.bind() 선택한 요소에 한 개 이상의 이벤트 등록
.off() 선택한 요소의 이벤트 제거
.on() 선택한 요소의 이벤트 설정
.one() 이벤트 한번만 처리
.trigger() 이벤트를 수동으로 발생
.unbind() 이벤트를 제거

Form Events

속성 설명
.blur() 포커스가 떠날 때 이벤트 발생
.change() 선택한 요소에서 값이 변경될 때 이벤트 발생
.focus() 선택한 요소에 포커스를 획득했을 때 이벤트 발생
.focusin() 선택한 요소에 포커스가 마주어지기 바로 전에 발생
.focusout() 포커스가 사라지기 바로 전 발생
.select() 입력 양식 텍스트를 선택했을 때 이벤트 발생
.submit() submit 버튼을 누르면 이벤트 발생

Keyboard Events

속성 설명
.keydown() 선택한 요소에서 키보드를 눌렀을 때 이벤트 발생
.keypress() 선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트 발생
.keyup() 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트 발생

Mouse Events

속성 설명
.click() 선택한 요소를 클릭했을 때 이벤트 발생
.contextMenu() 선택한 요소에서 오른쪽 버튼 클릭시 이벤트 발생
.dblclick() 선택한 요소를 더블 클릭했을 때 이벤트 발생
.hover() 마우스를 올렸을 때와 벗어 났을 때 각각 이벤트 발생
.mousedown() 메서드는 선택한 요소에서 마우스 버튼을 놀렀을 때 이벤트 발생
.mouseenter() 메서드는 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트 발생
.mouseleave() 선택한 요소 범위 내에서 마우스가 벗어 났을 때 이벤트 발생
.mousemove() 요소 범위 내에서 마우스를 움직였을 때 이벤트 발생
.mouseout() 마우스가 벗어 났을 때 이벤트 발생
.mouseover() 선택한 요소에서 마우스를 올렸을 때 이벤트 발생
.mouseup() 마우스를 눌렀다가 떼었을 때 이벤트 발생

Etc

기타

속성 설명
$('class').prop('tagName') 선택한 요소 태그 종류를 알려줌
$('class').prop('scrollWidth') 선택한 요소 가로 스크롤 길이를 알려줌
$('class').prop('scrollHeight') 선택한 요소 세로 스크롤 길이를 알려줌