반응형
사실 JQuery가 무거워서 일를 사용하기 보다는 기존 JS를 이용하여 개발을 하는 것이 더욱 좋은 퍼포먼스를 낼 수 있다는 말도 있습니다. 실제로 프로트엔트 커리큘럼 한 자료에서는 JQuery가 빠졌을 정도로 대체가 가능하지만 그래도 아직은 사용하는 곳이 많은거 같기 때문에 간단하게라도 봐보도록 하겠습니다.
JQuery
JQuery란 화면의 동적 기능을 JS(자바스크립트)보다 쉽게 개발할 수 있게 해주는 JS 기반 라이브러리입니다.
DOM과 이벤트 객체는 브라우저 종류가 다를 경우 다른 결과 값을 나타낼 수 있다는 단점이 있습니다. 이런 호환성 문제는 JQuery를 이용함으로 해결되었습니다. 호환성 문제만이 아니라 JQuery는 다양한 애니메이션과 효과를 지원하는 메서드를 지원하기 때문에 개발 시간을 단축할 수 있습니다.
- 브라우저 종류에 상관 없이 적용 가능
- 플러그인 제공
- 다양한 애니메이션과 효과를 지원하여 개발 시간이 단축
- 메서드 체이닝 기법이 가능하기 때문에 불필요한 코드 반복이 없음
- CSS 선택자를 사용해 HTML 태그에 접근하여 작업하므로 읽기 쉬운 형태로 작성 가능
단순화 예제)
let elem1 = document.getElementById("id");
let elem2 = $("#id");
메서드 체이닝 기법 예제)
$(function(){
$("h2#title").css("border", "1px solid #F00")
.css("background-color", "#BBB");
});
JQuery 사용 방법
- 다운로드 방식: JQuery 라이브러리를 제공하는 사이트에서 파일을 직접 내려받는 방식
- https://jquery.com/download/ , https://cdnjs.com/libraries/jquery
- 위 사이트에서 사용할 버전의 URL을 copy하여 주소 영역에 붙여 넣은 이동한 후, [ctrl + s]를 눌러 HTML이 있는 폴더에 [js]라는 이름으로 폴더를 만들어 저장합니다.
- <head>영역에 <script>태그를 삽입하여 저장한 파일 경로를 지정합니다.
- CDN 방식: 온라인에서 제공하는 JQuery 라이브러리를 CDN 호스트 설정하여 사용
- 위 사이트에서 JQuery 라이브러리 파일의 URL을 가져와 <head> 영역에 <script> 태그를 삽입하여 src 속성에 URL을 복사하는 방법이 있습니다.
JQuery 선택자
기본 선택자
직접 선택자
| selector 종류 | selector 표현 방법 | 설명 |
| All selector | $("*") | 모든 DOM 선택 |
| ID selector | $("#id") | 지정된 id를 갖는 DOM 선택 |
| class selector | $(".className") | 지정된 class를 갖는 DOM 선택 |
| Element selector | $("elementName") | 지정된 이름을 갖는 DOM 선택 |
| Multipart selector | $("selector1, selector2, ...") | 해당되는 선택자를 갖는 모든 DOM 선택 |
인접 관계 선택자
| selector 종류 | selector 표현 방법 | 설명 |
| 부모 요소 선택자 | $("요소 선택").parent() | 선택한 요소의 부모 요소를 선택 |
| 상위 요소 선택자 | 1. $("요소 선택").parents() 2. $("요소 선택").parents("요소 선택") |
1. 선택한 요소를 기준으로 상위 요소를 모두 선택 2. 선택한 요소를 기준으로 상위 요소 중 선택한 요소만 선택 |
| 가장 가까운 상위 요소 선택자 |
$("요소 선택").closest("div") | 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택 |
| 하위 요소 선택자 | $("요소 선택 하위 요소") | 선택한 요소의 지정한 하위 요소를 선택 (요소가 감싸고 있는 지정한 하위 요소 모두 선택) |
| 자식 요소 선택자 | $("요소 선택 > 자식 요소") | 선택한 요소를 기준으로 지정한 자식 요소만 선택 (인접 관계 선택자) |
| 자식 요소 선택자 | $("요소 선택").children("자식 요소 선택") | 선택한 요소를 기준으로 지정한 자식 요소만 선택 |
| 자식 요소들 선택자 | $("요소 선택").children() | 선택한 요소의 모든 자식 요소를 선택 |
| 형(이전) 요소 선택자 |
$("요소 선택").prev() | 선택한 요소의 바로 이전 요소를 선택 |
| 형(이전) 요소들 선택자 |
$("요소 선택").prevAll() | 선택한 요소의 이전 요소 모두를 선택 |
| 지정 형(이전) 요소들 선택자 |
$("요소 선택").prevUntil ("요소명") |
선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택 |
| 동생(다음) 요소 선택자 |
$("요소 선택").next() $("요소 선택+다음 요소") |
선택한 요소의 다음 요소를 선택 |
| 동생(다음) 요소들 선택자 |
$("요소 선택").nextAll() | 선택한 요소의 다음 요소 모두를 선택 |
| 지정 동생(다음) 요소들 선택자 |
$("요소 선택").nextUntil("h2") | 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택 |
| 전체 형제 요소 선택자 |
$(".demo").siblings() | class 값이 demo인 요소의 형제 요소 전체를 선택 |
탐색 선택자 ( + 배열 관련 메서드)
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여 더 정확하게 선택할 수 있습니다.
- 배열의 index를 사용해 선택하는 '위치 탐색 선택자'
- 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'
- 콘텐츠 포함 여부로 다시 선택할 수 있는 '콘텐츠 탐색 선택자' & '필터링 선택자'
위치 탐색 선택자
기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 더욱 정확하게 선택할 수 있습니다.
| 종류 | 설명 |
| $("요소").first() $("요소:first") |
전체 요소 중 첫 번째 요소만 선택한다. |
| $("요소").last() $("요소:last") |
전체 요소 중 마지막 요소만 선택한다. |
| $("요소:odd") | 요소 무리중 짝수 번쨰 요소만 선택한다. |
| $("요소:even") | 요소 무리중 홀수 번쨰 요소만 선택한다. |
| $("요소:first-of-type") | 요소 무리 중 첫 번째 요소만 선택한다. |
| $("요소:last-of-type") | 요소 무리 중 마지막 요소만 선택한다. |
| $("요소:nth-child(n)") | 요소 무리중 n 번째 요소만 선택한다. |
| $("요소:nth-child(숫자n)") | 요소 무리 중 n의 배수 요소만 선택한다. |
| $("요소:nth-last-of-type(n)") | 요소 무리 중 마지막 위치로부터 n번째에 있는 요소만 선택한다. |
| $("요소:only-child") | 부모 요소내에 선택한 요소가 1개뿐인 요소만 선택한다. |
| $("요소:eq(index)") $("요소").eq(index) |
요소중 인덱스 n이 참조하는 요소를 불러온다. |
| $("요소:gt(n)") | 요소 중 인덱스 n보다 큰 인덱스가 참조하는 요소를 불러온다. |
| $("요소:lt(n)") | 요소 중 인덱스 n보다 작은 인덱스가 참조하는 요소를 불러온다. |
| $("요소").slice(n) $("요소").slice(n, m) |
"요소" 내에, 인덱스 n부터 참조하는 요소를 선택합니다. "요소" 내에, 인덱스 n이상, m미만인 요소를 선택합니다. |
배열 관련 메서드
배열 관련한 탐색 선택자 외에도 배열 관련 메서드가 다음 처럼 내장되어 있습니다.
| 종류 | 사용법 | 설명 |
| each() / $.each() | $("요소 선택").each(function) #.each($("요소 선택").function) |
배열에 저장된 문서 객체만큼 메서드가 반복 실행됩니다. 배열에 저장된 객체의 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다. |
| $.map() | $.map(Aarry.function) | 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. |
| $.grep() | $grep(Aarry.function) | 배열에 저장된 데이터 수만큼 메서드가 반복 실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환합니다. |
| $.inArray() | $.inArray(data, Array, start index) | 배열 안에서 데이터를 찾습니다. 데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환합니다. start index의 값을 지정하면 해당 위치부터 데이터를 찾습니다. |
| $.isArray() | $.isArray(object) | 입력한 객체가 배열 객체라면 true를, 아니면 false를 반환합니다. |
| $.merge() | $.merge(Array1, Array2) | 인자값으로 입력한 2개의 배열 객체를 하나로 그룹화합니다. |
| index() | $("요소 선택").index("지정 요소 선택") | 선택자로 요소를 먼저 선택합니다. 그런 다음 지정한 요소의 인덱스 정보를 가져옵니다. |
속성 탐색 선택자
| 종류 | 설명 |
| $(["요소 선택[속성]") | 선택한 요소 중 지정한 속성이 포함된 요소만 선택 |
| $("요소 선택[속성^=값]") | 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택 |
| $("요소 선택[속성$=값]") | 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택 |
| $("요소 선택[속성*=값]") | 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택 |
| $(":type속성값") | <input> 요소 중 type 속성 값이 일치하는 요소만 선택합니다. ex) $(":text") |
| $(["요소 선택:[visible | hidden]") | 선택한 요소 중 보이는 | 숨겨져 있는 요소만 선택 |
| $(":속성") | 속성이 적용된 요소만 선택 ex) $(":selected"), $(":checked") |
콘텐츠 탐색 선택자
| 종류 | 설명 |
| $("요소 선택:contains(텍스트)") | 지정한 텍스트를 포함하는 요소만 선택한다. |
| $("요소 선택").contents() | 선택한 요소의 하위 요소 중 1 깊이의 텍스트와 태그 노드를 선택한다. |
| $("요소 선택:has(요소명)") $("요소 선택").has("요소명") |
선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다. |
| $("요소 선택:not(요소명)") $("요소 선택").not(제외할 요소 선택) |
선택한 요소 중 지정한 요소만 제외한 채 선택한다. |
| $("요소 선택").탐색 선택자().end() | 필터링되기 이전의 선택자가 적용 되도록 한다. |
| $("요소 선택").find("하위 요소 중 필터링할 요소 선택") | 선택한 하위 요소 중에서 find()로 필터링한 요소만 선택합니다. |
| $("요소 선택").filter("선택한 요소 중 필터링할 요소 선택") | 선택한 요소 중에서 filter()로 필터링한 요소만 선택합니다. |
| $("요소 선택").is(":[checked | selected | visible | hidden | animated]") | 선택한 요소의 상태가 지정 속성과 true를 반환, 그렇지 않으면 false를 반환한다. |
| $("요소 선택").is(":[checked | selected | visible | hidden | animated]") | is( ) 메서드는 선택한 요소의 상태가 지정 속성과 true를 반환, 그렇지 않으면 false를 반환한다. |
객체 조작 메서드
객체 조작 메서드란 객체를 생성, 복제, 삭제, 속성 변환하는 메서드입니다. 종류로는 다음과 같이 있습니다.
- 속성 조작 메서드 - 요소의 속성을 바꿀 때 사용 (속성 변환)
- 수치 조작 메서드 - 요소의 너비값 또는 높잇값 같은 수치를 바꿀 때 사용 (속성 변환)
- 객체 편집 메서드 - 객체를 생성하거나 삭제 또는 복제할 때 사용
속성 조작 메서드
| 종류 | 사용법 | 설명 |
| html() html("새 요소") |
$("요소 선택").html(); $("요소 선택").html("새 요소"); |
선택한 요소의 하위 요소를 가져옴 선택한 요소의 하위 요소를 모두 제거하고 그 위치에 지정한 새 요소를 생성 |
| text() text("새 텍스트") |
$("요소 선택").text() $("요소 선택").text("새 텍스트") |
선택한 요소에 포함된 모든 텍스트를 가져옴 선택한 요소의 하위 요소를 모두 제거하고 그 위치에 지정한 새 텍스트를 생성 |
| attr("속성명") attr("속성명", "새 값") |
$("요소 선택").attr("속성명") $("요소 선택").attr("속성명", "새 값") |
선택한 요소의 지정한 속성값을 가져옴 요소를 선택해 지정한 속성에 새 값을 적용 |
| removeAttr("속성명") | $("요소 선택").removeAttr("속성명") | 선택한 요소의 지정한 속성만 제거 |
| prop("상태 속성명") prop("상태 속성명", 새 값) |
$("요소 선택").prop("상태 속성명") $("요소 선택").prop("상태 속성명", 새 값) |
선택한 요소의 상태 속성값을 가져옴 요소를 선택해 상태 속성에 새 값을 적용 |
| val() val("새 값") |
$("요소 선택").val() $("요소 선택").val("새 값") |
선택한 폼 요소의 value 값을 가져옴 폼 요소를 선택해 value 속성에 새 값을 적용 |
| css("속성명") css("속성명", "새 값") |
$("요소 선택").css("속성명") $("요소 선택").css("속성명", "새 값") |
선택한 요소의 지정한 스타일 속성값을 가져옴 요소를 선택하여 지정한 스타일 속성에 새 값을 적용 |
| addClass("class 값") | $("요소 선택").addClass("class 값") | 선택한 요소의 class 속성에 새 값을 추가 |
| removeClass("class 값") | $("요소 선택").removeClass("class 값") | 선택한 요소의 class 속성에 지정값만 제거 |
| toggleClass("class 값") | $("요소 선택").toggleClass("class 값") | 선택한 요소의 class 속성에 지정값이 포함되어 있으면 제거하고 속성값이 없으면 추가 |
| hasClass("class 값") | $("요소 선택").hasClass("class 값") | 선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true 없으면 false 반환 |
수치 조작 메서드
| 종류 | 사용법 | 설명 |
| height() | $("요소 선택").height(); $("요소 선택").height(100); |
안쪽 여백과 선을 제외한 높이값을 반환하거나 변환 |
| width() | $("요소 선택").width(); $("요소 선택").width(100); |
안쪽 여백과 선을 제외한 너비값을 반환하거나 변환 |
| innerHeight() | $("요소 선택").innerHeight(); | 안쪽 여백을 포함한 높이값을 반환하거나 변환 |
| innerWidth() | $("요소 선택").innerWidth(); | 안쪽 여백을 포함한 너비값을 반환하거나 변환 |
| outerHeight() | $("요소 선택").outerHeight(); | 선과 안쪽 여백을 포함한 높이값을 반환하거나 변환 |
| outerWidth() | $("요소 선택").outerWidth(); | 선과 안쪽 여백을 포함한 너비값을 반환하거나 변환 |
| position() | $("요소 선택").position().left(); $("요소 선택").position().top(); |
선택한 요소의 포지션 위치값을 반환 |
| offset() | $("요소 선택").offset().left(); $("요소 선택").offset().top(); |
선택한 요소가 문서에서 수평/수직으로 얼마나 떨어져 있는지 값 반환 |
| scrollLeft() | $("요소 선택").scrollLeft(); | 브라우저의 수평 스크롤 이동 높이값 반환 |
| scrollTop() | $("요소 선택").scrollTop(); | 브라우저의 수평 스크롤 이동 너비값 반환 |
객체 편집 메서드
| 종류 | 사용법 | 설명 |
| before() | $("요소 선택").before("새 요소"); | 선택한 요소의 이전 위치에 새 요소 추가 |
| after() | $("요소 선택").after("새 요소"); | 선택한 요소의 다음 위치에 새 요소 추가 |
| append() | $("요소 선택").append("새 요소"); | 선택한 요소의 마지막 위치에 새 요소 추가 |
| appendTo() | $("새 요소").appendTo("요소 선택"); | 선택한 요소의 마지막 위치에 새 요소 추가 |
| prepend() | $("요소 선택").prepend("새 요소"); | 선택한 요소의 맨 앞 위치에 새 요소 추가 |
| prependTo() | $("새 요소").prependTo("요소 선택"); | 선택한 요소의 맨 앞 위치에 새 요소 추가 |
| insertBefore() | $("새 요소").insertBefore("요소 선택"); | 선택한 요소의 이전 위치에 새 요소 추가 |
| insertAfter() | $("새 요소").insertAfter("요소 선택"); | 선택한 요소의 다음 위치에 새 요소 추가 |
| clone() | $("요소 선택").clone(true or false); | 선택한 문서 객체를 복제합니다. 인자값이 true일 경우 하위 요소까지 모두 복제, false일 경우 선택 요소만 복제 |
| empty() | $("요소 선택").empty(); | 선택한 요소의 하위 내용을 모두 삭제 |
| remove() | $("요소 선택").remove(); | 선택한 요소를 삭제 |
| replaceAll() replaceWith() |
$("새 요소").replaceAll("요소 선택"); $("요소 선택").replaceWith(새 요소); |
선택한 요소들을 새 요소로 교체 |
| unwrap() | $("요소 선택").unwrap(); | 선택한 요소의 부모요소 삭제 |
| wrap() | $("요소 선택").wrap(새 요소); | 선택한 요소를 새 요소로 wrap |
| wrapAll() | $("요소 선택").wrapAll(); | 선택한 요소를 새 요소로 한꺼번에 wrap |
| wrapInner() | $("요소 선택").wrapInner(새 요소); | 선택한 요소의 내용을 새 요소로 각각 wrap |
이벤트 등록 메서드
이벤트 등록 메서드 종류
- 로딩 이벤트
- load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생한다.
- ready() 지정한 html 문서 객체의 로딩이 완료된 후 이벤트가 발생한다.
- error() 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생한다.
- 마우스 이벤트
- click() 선택한 요소를 클릭했을 때 이벤트가 발생한다.
- dbclick() 선택한 요소를 두번 클릭했을때 이벤트가 발생한다.
- mouseout() 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다.
- mouseover() 선택한 요소의 영역에 마우스 포인터 올려놨을 때 이벤트 발생한다.
- hover() 선택한 요소에 마우스 포인터 올렸을 때와 벗어났을 때 각각 이벤트가 발생한다.
- mousedown() 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
- mouseup() 선택한 요소에서 마우스 버튼을 눌렀다 뗐을 때 이벤트가 발생한다.
- mouseenter() 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생한다.
- mouseleave() 선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생한다.
- mousemove() 선택한 요소 범위에서 마우스 포인터 움직였을 때 이벤트가 발생한다.
- scroll() 가로, 세로 스크롤바를 움직일 때 마다 이벤트가 발생한다.
- 포커스 이벤트
- focus() 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스를 생성한다.
- focusin() 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생한다.
- focusout() 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생한다.
- blur() 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다.
- change() 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 강제로 change 이벤트를 발생시킬때도 사용한다.
- 키보드 이벤트
- keypress() 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 문자키를 제외한 키의 코드값을 반환한다.
- keydown() 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 키보드의 모든 키의 코드값을 반환한다.
- keyup() 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생한다.
이벤트 등록 방법
대상에 한 가지 동작에 대한 이벤트만 등록할 때 사용합니다.
$("이벤트 대상 선택").이벤트_등록_메서드(function() {
// 자바스크립트 코드;
});
대상에 한 각지 동작 이상의 이벤트를 등록할 때 사용합니다. 이를 그룹 이벤트라고 하는데 가볍게 on() 메서드에 대해서 설명하도록 하겠습니다. 추가적으로 다른 방법도 있지만 이는 아래에 [그룹 이벤트 등록 메서드]에서 자세히 설명하도록 하겠습니다.
// on() 메서드 등록 방법1
$("이벤트 대상 선택").on(
"이벤트종류1 이벤트종류2 ... 이벤트종류n",
function () {
/* 자바스크립트 코드; */
}
);
// on() 메서드 등록 방법2
$("이벤트 대상 선택").on({
"이벤트종류1 이벤트종류2 ... 이벤트종류n": function () {
/* 자바스크립트 코드; */
}
});
// on() 메서드 등록 방법3
$("이벤트 대상선택").on({
"이벤트종류1": function () {
/* 자바스크립트 코드; */
},
"이벤트종류2": function () {
/* 자바스크립트 코드; */
},
// ...
"이벤트종류n": function () {
/* 자바스크립트 코드; */
}
});
이벤트 제거하기: off() 메서드
$("이벤트 대상").off("제거할 이벤트 종류");
강제로 이벤트 발생시키기
사용자로 인해 이벤트가 발생한 것이 아니라 핸들러에 의해 이벤트가 자동으로 발생한 것입니다.
$("이벤트 대상").단독_이벤트_등록_메서드();
$("이벤트 대상").trigger("이벤트 종류");
로딩 이벤트 메서드
이 메서드를 이용하면 HTML문서를 요청한 후 문서의 로딩이 완료되면 이벤트 핸들러가 실행됩니다.
- ready() - 요청한 HTML 문서(document)의 로딩이 완료되면 이벤트를 발생
$(document).ready(function() { /* 자바스크립트 코드; */ });
$(document).on("ready", function() { /* 자바스크립트 코드; */ });
- load() - 외부에 연동된 소스(iframe, img, video)의 로딩이 완료되면 이벤트를 발생
$(window).load(function() { /* 자바스크립트 코드; */ } );
$(window).on("load", function() { /* 자바스크립트 코드; */ } );
이벤트 객체 속성
마우스 이벤트
| 종류 | 설명 |
| clientX | 마우스 포인터의 X좌표값 반환(스크롤 이동 거리 무시) |
| clientY | 마우스 포인터의 Y좌표값 반환(스크롤 이동 거리 무시) |
| pageX | 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X좌표값을 반환 |
| pageY | 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y좌표값을 반환 |
| screenX | 화면 모니터를 기준으로 마우스 포인터의 X좌표값 반환 |
| screenY | 화면 모니터를 기준으로 마우스 포인터의 Y좌표값 반환 |
| layerX | position을 적용한 요소를 기준으로 마우스 포인터의 X좌표값 반환 |
| layerY | position을 적용한 요소를 기준으로 마우스 포인터의 Y좌표값 반환 |
| button | 마우스 버튼 종류에 따라 값을 변환(왼쪽:0, 휠:1, 오른쪽:2) |
키보드 이벤트
| 종류 | 설명 |
| keyCode | 키보드의 아스키 코드값을 변환 |
| altKey | 이벤트 발생 시 Alt 키가 눌렸으면 true를, 아니면 false를 반환 |
| ctrlKey | 이벤트 발생 시 Ctrl 키가 눌렸으면 true를, 아니면 false를 반환 |
| shiftKey | 이벤트 발생 시 Shift 키가 눌렸으면 true를, 아니면 false를 반환 |
전체 이벤트
| 종류 | 설명 |
| target | 이벤트가 전파된 마지막 요소를 가리킵니다. |
| cancelBubble | 이벤트 전파를 차단하는 속성으로, 기본값은 false며, true로 설정하면 전파가 차단됩다. |
| stopPropagation() | 이벤트의 전파를 차단합니다. |
| preventDefault() | 기본 이벤트를 차단합니다. 예를 들어 <a>에 클릭 이벤트를 적용하고 사용자가 이벤트를 발생시키면 기본 이벤트가 등록되어 있어 링크 주소로 이동하는데, 이런 기본 이벤트를 차단할 수 있습니다. |
그룹 이벤트 등록 및 삭제
그룹 이벤트 등록을 통해 한 번에 2개 이상의 이벤트를 등록할 수 있습니다.
| 등록 | 해제 | 설명 |
| on() | off() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. |
| bind() | unbind() | 이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. |
| delegate() | undelegate() | 선택한 요소의 하위 요소에 이벤트를 등록합니다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다. |
| one() | 이벤트 대상 요소에 1개 이상의 이벤트를 등록합니다. 지정한 이벤트가 1회 발생하고 자동으로 해제됩니다. | |
on() 메서드
위에서 설명한 on()메서드의 예제는 이벤트를 등록한 후에 생성된 요소나 복제된 요소에는 이벤트를 등록할 수 없습니다.
다음과 같은 방법으로 작성할 경우 동적으로 생성된 요소에도 이벤트가 등록되는 '라이브 이벤트 등록 방식'이 적용됩니다.
"기본 이벤트 등록 방식"은 위로 스크롤하면 확인하실 수 있습니다.
$([document | "이벤트 대상의 상위 요소 선택"]).on(
"이벤트 종류",
"이벤트 대상 선택",
function () {
/* 자바스크립트 코드; */
}
);
off() 메서드
// 기본 이벤트 제거 방식
$("이벤트 대상 요소 선택").off("이벤트 종류");
// 라이브 이벤트 제거 방식
$([document | "이벤트 대상 상위 요소 선택"]).off(
"이벤트 종류",
"이벤트 대상 요소 선택"
);
delegate()
선택한 요소의 하위 요소에 이벤트를 등록합니다.
마찬가지로 등록 방식에 따라 이벤트를 등록한 후에도 동적으로 생성/복제된 요소에 이벤트가 적용됩니다.
$([document | "이벤트 대상의 상위 요소 선택"]).delegate(
"이벤트 종류",
"이벤트 대상 선택",
function () {
/* 자바스크립트 코드 */
}
);
undelegate()
// 기본 이벤트 제거 방식
$("이벤트 대상 요소 선택").delegate("이벤트 종류");
// 라이브 이벤트 제거 방식
$([document | "이벤트 대상 상위 요소 선택"]).delegate(
"이벤트 종류",
"이벤트 대상 요소 선택"
);
one() 메서드
일회용 이벤트 핸들러로, 이벤트가 1회 발생하면 등록된 이벤트가 제거됩니다.
마찬가지로 등록 방식에 따라 이벤트를 등록한 후에도 동적으로 생성/복제된 요소에 이벤트가 적용됩니다.
// 기본 이벤트 등록 방식
$("이벤트 대상 선택").one("이벤트종류", function () {
/* JS 코드 - 해당 코드는 한 번만 실행되고 더 이상 실행되지 않음 */
// 두 번째 부터 해당 코드가 실행됨
$(this).click(function () {
/* JS 코드 */
});
});
// Live Event 등록 방식
$([document | "이벤트 대상의 상위 요소 선택"]).one(
"이벤트 종류",
"이벤트 대상 선택",
function () {
/* 자바스크립트 코드 */
}
);
효과 & 애니메이션 메서드
효과 메서드
- 숨김
- hide() 요소를 숨긴다.
- fadeOut() 요소가 점점 투명해지면서 사라진다.
- slideUp() 요소가 위로 접히며 숨겨진다.
- 노출
- show() 숨겨진 요소가 나타난다.
- fadeIn() 숨겨진 요소가 점점 선명해진다.
- slideDown() 숨겨진 요소가 아래로 펼쳐진다.
- 노출, 숨김
- toggle() hide(), show() 효과를 적용한다.
- fadeToggle() fadeIn(), fadeOut() 효과를 적용한다.
- slideToggle() slideUp(), slideDown() 효과를 적용한다.
- fadeTo() 지정한 투명도를 적용한다.
효과 메서드 기본형 / fadeTo()
// 효과 메서드 기본형
$("요소 선택").효과메서드(효과_소요_시간, 가속도, 콜백_함수);
// fadeTo() 메서드
$("요소 선택").fadeTo(효과_소요_시간, 투명도, 콜백_함수);
- 효과 소요 시간: 요소를 노출/숨김할 때 소요되는 시간 ( 단위: ms )
- 가속도: 노출/숨김하는 동안 가속도 설정
- 콜백 함수: 노출/숨김 효과가 끝난 후 실행할 함수
- 투명도: 0~1로 투명도 설정 가능 ( 1에 가까울 수록 선명 )
애니메이션 메서드
선택한 요소에 다양한 동작 효과를 적용할 수 있습니다. 각 파라미터에 대한 설명은 효과 메서드 기본형에서 설명한 것과 유사하므로 생략하겠습니다.
$("요소 선택").animate({스타일_속성}, 적용_시간, 가속도, 콜백_함수)
애니메이션 효과 제어 메서드
'효과'나 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드입니다.
- stop() - 현재 실행 중인 효과를 모두 정지
- delay() - 지정한 시간만큼 지연했다가 애니메이션을 진행
- queue() - 큐에 사용자 정의 함수를 추가하거나 큐에 대기중인 함수를 배열에 담아 반환. 그리고 queue() 메서드 이후의 애니메이션 효과 메서드는 모두 취소
- clearQueue() - 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거.
- dequeue() - queue()메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거. 하지만 dequeue() 메서드를 이용하면 메서드가 제거되는 것을 막을 수 있음.
- finish() - 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료.
반응형
'Front-End > JS' 카테고리의 다른 글
| JS AJAX ( Asynchronous JavaScript And XML ) (0) | 2023.05.02 |
|---|---|
| JS JSON: JavaScript Object Notion (0) | 2023.05.02 |
| JS Web API ( storage, fetch, geolocation ) (0) | 2023.04.28 |
| JS BOM( Browser Object Model ): 브라우저 객체 모델 (0) | 2023.04.28 |
| JS DOM( Document Object Model ): 문서 객체 모델 (0) | 2023.04.28 |