코드랩 레퍼런스
jQuery Description 본문
Selectors
속성 | 설명 | |
---|---|---|
기본 선택자(Basic) | * | 전체 셀렉터는 전체 태그를 선택합니다. |
.class | 클래스 셀렉터는 클래스 태그를 선택합니다. | |
#id | 아이디 셀렉터는 아이디 태그를 선택합니다. | |
element | 태그 셀렉터는 기본 태그를 선택합니다. | |
element, element | 다중 셀렉터는 여러가지 태그를 선택합니다. | |
계층 선택자(Hierarchy) | Descendant Selector | 자손 선택자 모든 자식을 선택합니다. |
Child Selector | 자식 선택자는 바로 하위 자식만 선택합니다.(parent > child) | |
Next Adjacent Selector | 형제 선택자 다음 형제 태그를 선택합니다.(prev + next) | |
Next Siblings Selector | 형제들 선택자 다음 형제 모든 태그를 선택합니다.(prev ~ siblings) | |
기본필터 선택자(Basic Filters) | :animated | :animated 셀럭터는 애니메이션 태그를 선택합니다. |
:eq() | :eq(index) 셀렉터는 선택된 태그의 인덱스 번호를 통해 선택합니다. | |
:even | :even 셀렉터는 선택된 태그의 짝수번째 요소를 찾아 선택합니다. | |
:first | :first 셀렉터는 선택된 태그의 첫 번째 요소를 찾아 선택합니다. | |
:gt() | :gt(index) 셀렉터는 선택된 태그에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다. | |
:header | :header 셀럭터는 제목요소(h1~h6) 태그들을 선택합니다. | |
:lang() | :lang() 셀렉터는 언어 속성이 설정된 태그를 선택합니다. | |
:last | :last 셀렉터는 선택된 요소 중에서 마지막 번째 요소를 선택합니다. | |
:lt() | :lt(index) 셀렉터는 선택된 태그에서 인덱스보다 작은 인덱스를 가지고 있는 태그를 선택합니다. | |
:not() | :not() 셀렉터는 현재 선택한 요소의 반대 요소를 선택합니다. | |
:odd | :odd 셀렉터는 선택된 요소 중에서 홀수 번째 요소를 선택합니다. | |
:root | :root 셀렉터는 문서의 루트 요소를 선택합니다. | |
:target | :target 셀렉터는 이벤트를 발생한 타겟을 선택합니다. | |
내용필터 선택자(Content Filters) | :contains() | :contains() 셀렉터는 텍스트와 일치하는 문자열의 요소를 선택합니다. |
:empty | :empty 셀렉터는 텍스트가 없는 요소를 선택합니다. | |
:has() | :has() 셀렉터는 찾고 싶은 태그를 후손까지 살펴본 후 선택합니다. | |
:parent | :parent 셀렉터는 텍스트가 있는 요소를 선택합니다. | |
보임필터 선택자(Visibility Filters) | :hidden | :hidden 셀렉터는 보이지 않는 요소를 선택합니다. |
:visible | :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 | :first-child 셀럭터는 첫 번째 자식 요소를 선택합니다. |
:first-of-type | :first-of-type 셀럭터는 첫 번째 자식 요소 유형을 선택합니다. | |
:last-child | :first-child 셀럭터는 마지막 번째 자식 요소를 선택합니다. | |
:last-of-type | :last-of-type 셀럭터는 마지막 번째 자식 요소 유형을 선택합니다. | |
:nth-child() | :nth-child(index) 셀렉터는 인덱스 번째에 있는 자식 요소를 선택합니다. | |
:nth-last-child() | :nth-last-child(index) 셀렉터는 마지막 인덱스 번째에 있는 자식 요소를 선택합니다. | |
:nth-last-of-type() | :nth-last-of-type(index) 셀렉터는 마지막 인덱스 번째 자식 요소 유형을 선택합니다. | |
:nth-of-type() | :nth-of-type(index) 셀렉터는 인덱스 번째 자식 유형을 선택합니다. | |
:only-child | :only-child 셀렉터는 자식 요소가 오직 하나인 요소를 선택합니다. | |
:only-of-type | :only-of-type 셀렉터는 자식 요소 유형이 오직 하나인 요소를 선택합니다. | |
폼 선택자(Forms) | :button | :button 셀렉터는 버튼 입력 양식을 선택합니다. |
:checkbox | :checkbox 셀렉터는 체크 박스 입력 양식을 선택합니다. | |
:checked | :checked 셀렉터는 체크된 입력 양식을 선택합니다. | |
:disabled | :disabled 셀렉터는 사용 불가능한 입력 양식을 선택합니다. | |
:enabled | :enabled 셀럭터는 사용 가능한 입력 양식을 선택합니다. | |
:focus | :focus 셀럭트는 포커스된 입력 양식을 선택합니다. | |
:file | :file 셀럭터는 파일 업로드 양식을 선택합니다. | |
:image | :image 셀럭터는 이미지 입력 양식을 선택합니다. | |
:input | :input 셀럭터는 모든 입력 양식을 선택합니다. | |
:password | :password 셀럭터는 암호 입력 양식을 선택합니다. | |
:radio | :radio 셀렉터는 라디오 버튼 입력 양식을 선택합니다. | |
:reset | :reset 셀럭터는 리셋 입력 양식을 선택합니다. | |
:selected | :selected 셀럭터는 선택된 입력 양식을 선택합니다. | |
:submit | :submit 셀럭터는 데이터 보내기 입력 양식을 선택합니다. | |
:text | :text 셀럭터는 텍스트 박스 양식을 선택합니다. |
Attributes
속성 | 설명 | |
---|---|---|
Attributes | .attr() | .attr() 메서드는 HTML 요소의 속성 값을 설정하거나 반환합니다. |
.prop() | .prop() 메서드는 JavaScript 요소의 속성 값을 설정하거나 반환합니다. | |
.removeAttr() | .removeAttr() 메서드는 HTML 요소에서 하나 이상의 속성을 제거합니다. | |
.removeProp() | .removeProp() 메서드는 JavaScript 요소에서 하나 이상의 속성을 제거합니다. | |
.val() | .val() 메서드는 폼 요소의 속성 값을 설정하거나 반환합니다. | |
CSS | .addClass() | .addClass() 메서드는 하나 이상의 클래스를 추가합니다. |
.css() | .css() 메서는 선택한 요소 하나 이상의 스타일 속성을 설정하거나 반환합니다. | |
.hasClass() | .hasClass() 메서는 선택한 요소 중 지정된 클래스가 있는지 확인합니다. | |
.removeClass() | .removeClass() 메서드는 하나 이상의 클래스를 제거합니다. | |
.toggleClass() | .toggleClass() 메서드는 하나 이상의 클래스를 추가/제거합니다. | |
Dimensions | .height() | .height() 메서드는 선택한 요소의 높이를 설정하거나 반환합니다. |
.innerHeight() | .innerHeight() 메서드는 선택한 요소의 높이(패딩 포함, 보더 불포함)를 반환합니다. | |
.innerWidth() | .innerWidth() 메서드는 선택한 요소의 가로 폭(패딩 포함, 보더 불포함)을 반환합니다. | |
.outerHeight() | .outerHeight() 메서드는 선택한 요소의 높이(패딩, 보더 포함)를 반환합니다. | |
.outerWidth() | .outerWidth() 메서드는 선택한 요소의 가로(패딩, 보더 포함)를 반환합니다. | |
.width() | .width() 메서드는 선택한 요소의 가로를 설정하거나 반환합니다. | |
Offset | .offset() | .offset() 메서드는 선택한 요소의 좌표 값(문서 기준)을 설정하거나 반환합니다. |
.offsetParent() | .offsetParent() 메서드는 선택한 요소의 부모 좌표 값(문서 기준)을 반환합니다. | |
.position() | .position() 메서드는 선택한 요소의 좌표 값을 반환합니다. | |
.scrollLeft() | .scrollLeft() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. | |
.scrollTop() | .scrollTop() 메서드는 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. | |
Data | .data() | .data() 메서드는 선택한 요소의 data- 속성 값을 설정하거나 반환합니다. |
.removeData() | .removeData() 메서드는 선택한 요소의 data- 속성 값을 삭제합니다. |
Manipulation
속성 | 설명 | |
---|---|---|
Copying | .clone() | .clone() 메서드는 선택한 요소 본사본을 만듭니다. |
DOM Insertion, Around | .wrap() | .wrap() 메서드는 선택한 요소에 새로운 요소를 추가합니다. |
.wrapAll() | .wrapAll() 메서드는 선택한 모든 요소에 새로운 요소를 추가합니다. | |
.wrapInner() | .wrapInner() 메서드는 선택한 각각의 요소에 새로운 요소를 추가합니다. | |
DOM Insertion, Inside | .append() | .append() 메서드는 선택한 요소 마지막 위치에 새로운 요소를 추가합니다. |
.appendTo() | .appendTo() 메서드는 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다. | |
.html() | .html() 메서드는 선택한 요소 내부의 HTML을 읽거나 쓸 수 있습니다. | |
.prepend() | .prepend() 메서드는 선택한 요소 처음 위치에 새로운 요소를 추가합니다. | |
.prependTo() | .prependTo() 메서드는 선택한 타겟 처음 위치에 새로운 요소를 추가합니다. | |
.text() | .text() 메서드는 선택한 요소 내부의 텍스트를 읽거나 쓸 수 있습니다. | |
DOM Insertion, Outside | .after() | .after() 메서드는 선택한 요소 다음에 새로운 요소를 추가합니다. |
.before() | .before() 메서드는 선택한 요소 이전에 새로운 요소를 추가합니다. | |
.insertAfter() | .insertAfter() 메서드는 선택한 타겟 요소 다음에 새로운 요소를 추가합니다. | |
.insertBefore() | .insertBefore() 메서드는 선택한 타겟 요소 이전에 새로운 요소를 추가합니다. | |
DOM Removal | .detach() | .detach() 메서드는 선택한 요소(데이터 및 이벤트 불포함)를 제거합니다. |
.empty() | .empty() 메서드는 선택한 요소의 하위 요소를 제거합니다. | |
.remove() | .remove() 메서드는 선택한 요소(데이터 및 이벤트 포함)를 제거합니다. | |
.unwrap() | .unwrap() 메서드는 선택한 요소의 부모요소를 제거합니다. | |
DOM Replacement | .replaceAll() | .replaceAll() 메서드는 선택한 요소를 새로운 요소로 바꿉니다. |
.replaceWith() | .replaceWith() 메서드는 선택한 요소를 새로운 컨텐츠로 바꿉니다. |
Traversing
속성 | 설명 | |
---|---|---|
필터링(Filtering) | .eq() | .eq() 메서드는 선택한 요소의 인덱스 번호를 갖는 요소를 반환합니다. |
.filter() | .filter() 메서드는 선택된 요소에서 한 번 더 필터링하여 요소를 선택합니다. | |
.first() | .first() 메서드는 선택한 요소의 첫 번째 요소를 반환합니다. | |
.has() | .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다. | |
.is() | .is() 메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환합니다. | |
.last() | .last() 메서드는 선택한 요소의 마지막 요소를 반환합니다. | |
.map() | .map() 메서드는 배열의 데이터를 변환시켜 새로운 배열 객체를 만듭니다. | |
.not() | .not() 메서드는 선택한 요소 중 지정한 요소만 제외하고 선택합니다. | |
.slice() | .slice() 메서드는 선택한 요소에 지정한 인덱스를 선택합니다. | |
기타(Miscellaneous Traversing) | .add() | .add() 메서드는 선택한 요소에 새로운 요소를 추가합니다. |
.addBack() | .addBack() 메서는 선택한 요소의 상위 요소도 같이 선택합니다. | |
.contents() | .contents() 메서드는 선택한 요소의 하위 콘텐츠를 선택합니다. | |
.each() | .each() 메서드는 선택한 여러 요소들을 각각 순차적으로 실행합니다. | |
.end() | .end() 메서드는 필터링이 일어나기 이전의 요소를 선택합니다. | |
트리구조 탐색(Tree Traversal) | .children() | .children() 메서드는 선택한 요소의 모든 자식을 선택합니다. |
.closest() | .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다. | |
.find() | .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다. | |
.next() | .next() 메서드는 선택한 요소의 다음 요소를 선택합니다. | |
.nextAll() | .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다. | |
.nextUntil() | .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다. | |
.parent() | .parent() 메서드는 선택한 요소의 부모 요소를 선택합니다. | |
.parents() | .parents() 메서드는 선택한 요소의 부모 요소를 선택합니다. | |
.parentsUntil() | .parentsUntil() 메서드는 지정한 선택 요소의 모든 부모 요소를 선택합니다. | |
.prev() | .prev() 메서드는 선택한 요소의 이전 요소를 선택합니다. | |
.prevAll() | .prevAll() 메서드는 선택한 요소의 이전 모든 요소를 선택합니다. | |
.prevUntil() | .prevUntil() 메서드는 지정한 선택 요소의 이전 모든 요소를 선택합니다. | |
.siblings() | .siblings() 메서드는 선택한 요소의 모든 형제 요소를 선택합니다. |
Effect
속성 | 설명 | |
---|---|---|
Basic | .hide() | .hide() 메서드는 선택한 요소를 숨김니다. |
.show() | .show() 메서드는 선택한 요소를 보여줍니다. | |
.toggle() | .toggle() 메서드는 선택한 요소를 숨김/노출합니다. | |
custom | .animate() | .animate() 메서드는 선택한 요소에 애니메이션을 적용합니다. |
.clearQueue() | .clearQueue() 메서드는 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다. | |
.delay() | .delay() 메서드는 애니메이션 효과를 지연합니다. | |
.dequeue() | .dequeue() 메서드는 스택에 쌓인 큐를 모두 제거합니다. | |
.finish() | .finish() 메서드는 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. | |
.queue() | .queue() 메서드는 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. | |
.stop() | .stop() 메서드는 실행중인 애니메이션을 정지합니다. | |
Fading | .fadeIn() | .fadeIn() 메서드는 선택한 요소를 천천히 보여줍니다. |
.fadeOut() | .fadeOut() 메서는 선택한 요소를 천천히 숨김니다. | |
.fadeTo() | .fadeTo() 메서드는 선택한 요소 투명도를 조절합니다. | |
.fadeToggle() | .fadeToggle() 메서드는 숨김/노출을 천천히 합니다. | |
Sliding | .slideDown() | .slideDown() 메서드는 선택한 요소를 슬라이딩으로 보여줍니다. |
.slideToggle() | .slideToggle() 메서드는 숨김/노출을 슬라이딩으로 합니다. | |
.slideUp() | .slideUp() 메서드는 선택한 요소를 슬라이딩으로 숨깁니다. |
Event
속성 | 설명 | |
---|---|---|
Browser Events | .resize() | .resize() 메서드는 웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다. |
.scroll() | .scroll() 메서드는 웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다. | |
Document Loading | .ready() | .ready() 메서드는 웹 페이지가 로딩 되었을 때 이벤트가 발생합니다. |
Event Handler Attachment | .bind() | .bind() 메서드는 선택한 요소에 한 개 이상의 이벤트를 등록합니다. |
.delegate() | .delegate() 메서드는 선택한 요소의 지정된 하위요소에 이벤트를 등록합니다. | |
.off() | .off() 메서드는 선택한 요소의 이벤트를 제거합니다. | |
.on() | .on() 메서드는 선택한 요소의 이벤트를 설정합니다. | |
.one() | .one() 메서는 이벤트 처리를 연결합니다. | |
.trigger() | .trigger() 메서드는 이벤트를 수동으로 발생시킵니다. | |
.triggerHandler() | .triggerHandler() 메서드는 이벤트를 수동으로 발생시킵니다. | |
.unbind() | .unbind() 메서드는 이벤트를 제거합니다. | |
.undelegate() | .undelegate() 메서드는 지정된 하위 요소에 이벤트를 등록합니다. | |
Form Events | .blur() | .blur() 메서드는 포커스가 떠날 때 이벤트가 발생합니다. |
.change() | .change() 메서드는 요소에서 값이 변경될 때 이벤트가 발생합니다. | |
.focus() | .focus() 메서드는 요소에 포커스를 획득했을 때 이벤트가 발생합니다. | |
.focusin() | .focusin() 메서드는 선택한 요소에 포커스가 마주어지기 바로 전에 발생합니다. | |
.focusout() | .focusout() 메서드는 포커스가 사라지기 바로 전에 발생합니다. | |
.select() | .select() 메서드는 입력 양식을 텍스트를 선택했을 때 이벤트가 발생합니다. | |
.submit() | .submit() 메서드는 submit 버튼을 누르면 이벤트가 발생합니다. | |
Keyboard Events | .keydown() | .keydown() 메서드는 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. |
.keypress() | .keypress() 메서드는 선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트가 발생합니다. | |
.keyup() | .keyup() 메서드는 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생합니다. | |
Mouse Events | .click() | .click() 메서드는 선택한 요소를 클릭했을 때 이벤트가 발생합니다. |
.contextMenu() | ||
.dblclick() | .dblclick() 메서드는 선택한 요소를 더블 클릭했을 때 이벤트가 발생합니다. | |
.hover() | .hover() 메서드는 마우스를 올렸을 때와 벗어 났을 때 각각 이벤트가 발생합니다.. | |
.mousedown() | .mousedown() 메서드는 선택한 요소에서 마우스 버튼을 놀렀을 때 이벤트가 발생합니다. | |
.mouseenter() | .mouseenter() 메서드는 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다. | |
.mouseleave() | .mouseleave() 메서드는 선택한 요소 범위 내에서 마우스가 벗어 났을 때 이벤트가 발생합니다. | |
.mousemove() | .mousemove() 메서드는 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다. | |
.mouseout() | .mouseout() 메서드는 마우스가 벗어 났을 때 이벤트가 발생합니다. | |
.mouseover() | .mouseover() 메서드는 선택한 요소에서 마우스를 올렸을 때 이벤트가 발생합니다. | |
.mouseup() | .mouseup() 메서드는 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. |
Core
속성 | 설명 |
---|---|
.index() | .index() 메서드는 이벤트가 발생한 요소의 인덱스 값을 반환합니다 |