코드랩 레퍼런스

jQuery Description 본문

BASIC

jQuery Description

webstoryboy 2017.06.04 16:43

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() 메서드는 이벤트가 발생한 요소의 인덱스 값을 반환합니다

Share

Ad

Comments
댓글쓰기 폼