제이쿼리 기초
제이쿼리 사용방법
제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. jQuery 라이브러리는 jQuery 공식사이트에서 다운 받을 수 있습니다. jQuery는 1.x, 2.x, 3.x 버전이 있습니다. 1.x 버젼은 IE6, IE7, IE8 버젼을 지원합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
</head>
<body>
....
</body>
</html>
제이쿼리 메서드
기본 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 태그 선택자 | $("p") | 기본 태그를 선택합니다. |
| 클래스 선택자 | $(".class") | 클래스 태그를 선택합니다. |
| 아이디 선택자 | $("#id") | 아이디 태그를 선택합니다. |
| 그룹 선택자 | $("p, .class, #id") | 여러가지 태그를 선택합니다. |
| 전체 선택자 | $("*") | 전체 태그를 선택합니다. |
계층 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 자손 선택자 | $("div li") | 자식(하위) 태그 모두 선택합니다. |
| child 선택자 | $("div > p") | 자식(하위) 태그만 선택합니다.(자손은 포함안됨) |
| sibling 선택자 | $("div + p") | 자식 태그 다음 형제 태그를 선택합니다. |
| siblings 선택자 | $("div ~ li") | 자식 태그 다음 모든 형제태그를 선택합니다. |
속성 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| [name="value"] | $("li a[href='#page']") | 속성 중에 '#page'와 일치하는 태그를 선택합니다. |
| [name^="value"] | $("li a[href^='http']") | 속성 중에 'http'로 시작하는 태그를 선택합니다. |
| [name$="value"] | $("li a[href$='.com']") | 속성 중에 '.com'로 끝나는 태그를 선택합니다. |
| [name~="value"] | $("li a[href~='.com']") | 속성 중에 '.com'이 포함되는 바로 옆 형제 태그를 선택합니다. |
| [name*="value"] | $("li a[href*='web']") | 속성 중에 'web'가 포함되어 있는 태그를 선택합니다. |
| [name|="value"] | $("li a[href|='web']") | 속성 중에 'web'으로 시작하는 속성의 태그를 선택합니다. |
| [name!="value"] | $("li a[href!='naver.com']") | 속성 중에 'naver.com'와 일치하지 않는 태그를 선택합니다. |
| [name="value"][name="value"] | $("li a[href][class]") | 속성 중에 'href' 속성과 'class' 속성이 모두 있는 태그를 선택합니다. |
기본 필터 선택자
| 종류 | 설명 |
|---|---|
| :animated | show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다. |
| :eq(index) | 선택된 태그들의 인덱스 번호를 통해 선택합니다. |
| :gt(index) | 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다. |
| :lt(index) | 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다. |
| :header | 제목 요소(h1~h6) 태그들을 선택합니다. |
| :first | 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다. |
| :last | 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다. |
| :odd | 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다. |
| :even | 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다. |
| :not() | 현재 선택한 요소의 반대 요소를 선택합니다. |
| :root() | 문서의 가장 기본 루트 태그를 선택합니다. |
| :lang() | 선택된 요소 중에서 언어 속성을 선택합니다. |
내용 필터 선택자
| 종류 | 설명 |
|---|---|
| :contains() | ()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때 그 요소를 반환합니다. |
| :empty | 요소에 텍스트 없을 때 선택됩니다. |
| :has() | 요소 내부에서 찾고 싶은 태그를 후손 요소까지 살펴본 후 요소가 있으면 반환합니다. |
| :parent | empty와 반대로 요소에 텍스트가 존재할 때에 선택됩니다. |
보임 필터 선택자
| 종류 | 설명 |
|---|---|
| :hidden | 보이지 않는 요소를 선택합니다. |
| :visible | 보이는 요소를 선택합니다. |
자식 요소 필터 선택자
| 종류 | 설명 |
|---|---|
| :first-child | 첫 번째 자식 요소를 선택합니다. |
| :last-child | 마지막 번째 자식 요소를 선택합니다. |
| :first-of-type | 자식 중 첫 번째 유형의 자식 요소를 선택합니다. |
| :last-of-type | 자식 중 마지막 번째 유형의 자식 요소를 선택합니다. |
| :nth-child() | index번째에 있는 자식 요소를 선택합니다. |
| :nth-last-child() | index번째에 있는 마지막 자식 요소를 선택합니다. |
| :nth-last-of-type() | index번째에 있는 마지막 유형의 자식 요소를 선택합니다. |
| :nth-of-type() | index번째에 있는 유형의 자식 요소를 선택합니다. |
| :only-child | 자식 요소가 오직 하나인 요소를 선택합니다. |
| :only-of-type() | 자식 요소 중 오직 하나 유형인 요소를 선택합니다. |
폼 선택자
| 종류 | 설명 |
|---|---|
| :button | 버튼 입력 양식을 선택합니다. |
| :checkbox | 체크박스 입력 양식을 선택합니다. |
| :checked | :checked된 입력 양식을 선택합니다. |
| :disabled | :disabled된 입력 양식을 선택합니다. |
| :enabled | :enabled된 입력 양식을 선택합니다. |
| :focus | 입력 양식에 포커스된 태그를 선택합니다. |
| :file | 파일 업로드 양식을 선택합니다. |
| :image | 이미지 입력 양식을 선택합니다. |
| :input | 모든 입력 양식을 선택합니다. |
| :password | 암호 입력 양식을 선택합니다. |
| :radio | 라디오 버튼 입력 양식을 선택합니다. |
| :reset | 리셋 입력 양식을 선택합니다. |
| :selected | :selected된 입력 양식을 선택합니다. |
| :submit | 데이터 보내기 입력 양식을 선택합니다. |
| :text | 텍스트 박스 양식을 선택합니다. |
탐색(Traversing)
| 유형 | 메서드 | 설명 |
|---|---|---|
| 트리구조 탐색(Tree Traversal) | .children() | 선택한 요소의 바로 아래 자식 요소만 선택합니다. |
| .closest() | 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다. | |
| .find() | 선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다. | |
| .next() | 선택한 요소의 다음 요소를 선택합니다. | |
| .nextAll() | 선택한 요소의 다음 모든 요소를 선택합니다. | |
| .nextUntil() | 선택한 요소의 다음 요소 중 조건에 맞을 때까지 찾습니다. | |
| .parent() | 선택한 요소의 부모 요소를 선택합니다. | |
| .parents() | 선택한 요소의 모든 부모 요소를 선택합니다. | |
| .parentsUntil() | 선택한 요소의 부모 요소 중 조건에 맞을 때까지 찾습니다. | |
| .prev() | 선택한 요소의 이전 요소를 선택합니다. | |
| .prevAll() | 선택한 요소의 이전 모든 요소를 선택합니다. | |
| .prevUntil() | 선택한 요소의 이전 요소 중 조건에 맞을 때까지 찾습니다. | |
| .siblings() | 선택한 요소의 형제 요소를 모두 찾습니다. | |
| 필터링(Filtering) | .eq() | 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. |
| .filter() | 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다. | |
| .first() | 선택된 요소에서 첫번째 자식 요소를 찾습니다. | |
| .has() | 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다. | |
| .is() | 선택된 요소 객체의 특징을 판별합니다. | |
| .last() | 선택된 요소에서 마지막번째 자식 요소를 찾습니다. | |
| .map() | 선택된 요소의 배열 집합을 새롭게 변경합니다. | |
| .not() | 선택된 요소에서 조건에 맞지 않는 것을 선택합니다. | |
| .slice() | 선택된 요소에서 조건의 범위로 재선택합니다. | |
| 기타(Miscellaneous Traversing) | .add() | 선택한 요소에 새로운 요소를 추가합니다. |
| .addBack() | 선택한 요소의 상위 요소도 같이 선택합니다. | |
| .contents() | 선택한 요소와 일치하는 콘텐츠 요소를 선택합니다. | |
| .each() | 선택한 여러 요소들을 각각 순차적으로 실행합니다. | |
| .end() | 선택한 요소의 필터링이 일어나기 이전의 요소를 선택합니다. |
속성(Attributes)
| 유형 | 메서드 | 설명 |
|---|---|---|
| 속성(Attributes) | .attr() | 선택한 HTML 요소의 속성 값을 설정하거나 반환합니다. |
| .prop() | 선택한 JavaScript 요소의 속성 값을 설정하거나 반환합니다. | |
| .removeAttr() | 선택한 HTML 요소에서 하나 이상의 속성을 제거합니다. | |
| .removeProp() | 선택한 JavaScript 요소에서 하나 이상의 속성을 제거합니다. | |
| .val() | 선택한 폼 요소의 속성 값을 설정하거나 반환합니다. | |
| 스타일(CSS) | .addClass() | 선택한 요소에 클래스를 추가합니다. |
| .css() | 선택한 요소에 CSS 속성 값을 설정하거나 변경합니다. | |
| .hasClass() | 선택한 요소에 클래스가 있는지를 찾습니다. | |
| .removeClass() | 선택한 요소에 클래스를 삭제합니다. | |
| .toggleClass() | 선택한 요소에 클래스의 추가/제거를 연속하여 사용 할 수 있습니다. | |
| 디멘션(Dimensions) | .height() | 선택한 요소의 높이(패딩/마진/보더 불포함)를 설정하거나 반환합니다. |
| .innerHeight() | 선택한 요소의 높이(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다. | |
| .innerWidth() | 선택한 요소의 가로(패딩 포함, 보더/마진 불포함)를 설정하거나 반환합니다. | |
| .outerHeight() | 선택한 요소의 높이(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다. | |
| .outerWidth() | 선택한 요소의 가로(패딩/보더 포함, 마진 불포함)를 설정하거나 반환합니다. | |
| .width() | 선택한 요소의 가로(패딩/마진/보더 불포함)를 설정하거나 반환합니다. | |
| 오프셋(offset) | .offset() | 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. |
| .offsetParent() | 선택한 요소의 부모 위치 좌표 값(문서 기준)을 설정하거나 반환합니다. | |
| .position() | 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다. | |
| .scrollLeft() | 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다. | |
| .scrollTop() | 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다. |
변경(Manipulation)
| 유형 | 메서드 | 설명 |
|---|---|---|
| Copying | .clone() | 선택한 요소 본사본을 만듭니다 |
| DOM Insertion, Around | .wrap() | 선택한 요소에 새로운 태그를 추가합니다. |
| .wrapAll() | 선택한 요소에 새로운 태그를 추가합니다. | |
| .wrapInner() | 선택한 각각의 요소에 각각 새로운 태그를 추가합니다. | |
| DOM Insertion, Around | .append() | 선택한 요소 마지막 위치에 새로운 요소를 추가합니다. |
| .appendTo() | 선택한 타겟 마지막 위치에 새로운 요소를 추가합니다. | |
| .html() | 선택한 요소 내부의 HTML을 읽거나 변경합니다. | |
| .prepend() | 선택한 요소 처음 위치에 새로운 요소를 추가합니다.. | |
| .prependTo() | 선택한 타겟 처음 위치에 새로운 요소를 추가합니다. | |
| .text() | 선택한 요소 내부의 텍스트를 읽거나 변경합니다. | |
| DOM Insertion, Outside | .after() | 선택한 요소 다음에 새로운 요소를 추가합니다. |
| .before() | 선택한 요소 이전에 새로운 요소를 추가합니다. | |
| .insertAfter() | 선택한 타겟 요소 다음에 새로운 요소를 추가합니다. | |
| .insertBefore() | 선택한 타겟 요소 이전에 새로운 요소를 추가합니다. | |
| DOM Removal | .detach() | 선택한 요소(데이터 및 이벤트 불포함)를 제거합니다. |
| .empty() | 선택한 요소의 하위 요소를 제거합니다. | |
| .remove() | 선택한 요소(데이터 및 이벤트 포함)를 제거합니다. | |
| .unwrap() | 선택한 요소의 부모요소를 제거합니다. | |
| DOM Replacement | .replaceAll() | 선택한 요소를 새로운 요소로 바꿉니다. |
| .replaceWith() | 선택한 요소를 새로운 컨텐츠로 바꿉니다. |
효과(Effect)
| 유형 | 메서드 | 설명 |
|---|---|---|
| Basic | .hide() | 선택한 요소를 숨김니다. |
| .show() | 선택한 요소를 보여줍니다. | |
| .toggle() | 선택한 요소를 숨김/노출합니다. | |
| Basic | .fadeIn() | 선택한 요소를 천천히 보여줍니다. |
| .fadeOut() | 선택한 요소를 천천히 숨김니다. | |
| .fadeTo() | 선택한 요소의 투명도를 조절합니다. | |
| .fadeToggle() | 선택한 요소를 숨김/노출을 천천히 합니다. | |
| Fading | .fadeIn() | 선택한 요소를 천천히 보여줍니다. |
| .fadeOut() | 선택한 요소를 천천히 숨김니다. | |
| .fadeTo() | 선택한 요소의 투명도를 조절합니다. | |
| .fadeToggle() | 선택한 요소를 숨김/노출을 천천히 합니다. | |
| Sliding | .slideDown() | 선택한 요소를 슬라이딩으로 보여줍니다. |
| .slideToggle() | 선택한 요소를 슬라이딩으로 숨김/노출합니다. | |
| .slideUp() | 선택한 요소를 슬라이딩으로 숨깁니다. | |
| Custom | .animate() | 선택한 요소에 애니메이션을 적용합니다. |
| .clearQueue() | 선택한 요소에 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다. | |
| .delay() | 선택한 요소의 애니메이션를 효과를 지연합니다. | |
| .dequeue() | 선택한 요소 스택에 쌓인 큐를 모두 제거합니다. | |
| .finish() | 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. | |
| .queue() | 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. | |
| .stop() | 선택한 요소의 실행중인 애니메이션을 정지합니다. |
이벤트(Event)
| 유형 | 메서드 | 설명 |
|---|---|---|
| Browser Events | .resize() | 웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다. |
| .scroll() | 웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다. | |
| .ready() | 웹 페이지가 로딩 되었을 때 이벤트가 발생합니다. | |
| Browser Events | .bind() | 선택한 요소에 한 개 이상의 이벤트를 등록합니다. |
| .delegate() | 선택한 요소 하위 요소에 이벤트를 등록합니다. | |
| .off() | 선택한 요소의 이벤트를 제거합니다. | |
| .on() | 선택한 요소의 이벤트를 설정합니다. | |
| .one() | 선택한 요소의 이벤트 처리를 한번만 설정합니다. | |
| .trigger() | 선택한 요소의 이벤트를 수동으로 발생시킵니다. | |
| .triggerHandler() | 선택한 요소의 이벤트를 수동으로 발생시킵니다. | |
| .unbind() | 선택한 요소의 이벤트를 제거합니다. | |
| .undelegate() | 선택한 요소 하위 요소에 이벤트를 제거합니다. | |
| Browser Events | .bind() | 선택한 요소에 한 개 이상의 이벤트를 등록합니다. |
| .delegate() | 선택한 요소 하위 요소에 이벤트를 등록합니다. | |
| .off() | 선택한 요소의 이벤트를 제거합니다. | |
| .on() | 선택한 요소의 이벤트를 설정합니다. | |
| .one() | 선택한 요소의 이벤트 처리를 한번만 설정합니다. | |
| .trigger() | 선택한 요소의 이벤트를 수동으로 발생시킵니다. | |
| .triggerHandler() | 선택한 요소의 이벤트를 수동으로 발생시킵니다. | |
| .unbind() | 선택한 요소의 이벤트를 제거합니다. | |
| .undelegate() | 선택한 요소 하위 요소에 이벤트를 제거합니다. | |
| 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() | 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. |
