Recent Posts
Recent Comments
04-02 00:30
«   2026/04   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Today
Total
관리 메뉴

생각을 IT다

jQuery API (2) 본문

jQuery

jQuery API (2)

흑백논리 2023. 9. 1. 14:54
반응형

jQuery API에 관해 공부하며, 지속적으로 찾아보기 위해 만든 글입니다.
 
틀린 부분이 있을 수도 있습니다.
 

deferred.always()비동기 작업의 결과에 관계 없이 항상 실행되는 콜백 함수를 연결deferred.always(콜백_함수);
deferred.catch()비동기 작업 실패 시 실행되는 콜백 함수 연결

- 3.0 버전 이전에는 .fail() 사용
deferred.catch(콜백_함수);
deferred.done()비동기 작업 성공 시 실행되는 콜백 함수 연결deferred.done(콜백_함수);
deferred.fail()비동기 작업 실패 시 실행되는 콜백 함수 연결deferred.fail(콜백_함수);
deferred.isRejected()Deferred 객체의 거부 상태 여부 확인deferred.isRejected();
deferred.isResolved()Deferred 객체의 해결 상태 여부 확인deferred.isResolved();
deferred.notify()비동기 작업 진행 중일때 진행 상태 확인deferred.notify(메시지);
deferred.notifyWith()진행 상태 및 중간 결과 확인deferred.notifyWith(컨텍스트, [인자]);
deferred.pipe()비동기 작업 결과 처리 및 변환deferred.pipe(doneFilter, failFilter);
deferred.progress()비동기 작업 진행 상태 처리하는 콜백 함수 연결deferred.progress(콜백_함수);
deferred.promise()Deferred 객체를 Promise 객체 변환deferred.promise();
deferred.reject()비동기 작업 실패 처리 후 실패 상태 설정deferred.reject([인자]);
deferred.rejectWith()실패 상태 설정 후 실패 콜백 호출 시 실행 컨텍스트 및 인자 지정deferred.rejectWith(컨텍스트, [인자]);
deferred.resolve()비동기 작업 성공 처리 후 성공 상태 설정deferred.resolve([인자]);
deferred.resolveWith()성공 상태 설정 후 성공 콜백 호출 시 실행 컨텍스트 및 인자 지정deferred.resolveWith(컨텍스트, [인자]);
deferred.state()Deferred 객체의 상태 반환deferred.state();
deferred.then()비동기 작업의 성공/실패 여부에 따라 다른 콜백 함수 등록deferred.then(doneCallback, failCallback);
.delay()선택 요소의 애니메이션 및 일반 작업을 일정 시간 지연$(선택자).delay(지연시간).메서드();
.delegate()동적 추가 요소에 이벤트 핸들러 할당

- 3.0버전부터는 .on() 메서드 사용 권장
$(상위_요소).delegate(하위_요소, 이벤트_유형, 이벤트_핸들러);
.dequeue()요소 큐에 저장된 함수 실행 후 애니메이션 및 이벤트 큐 처리$(선택자).dequeue([이름]);
Descendant Selector("ancestor descendant")CSS 선택자 유형

특정 조상 요소 아래 모든 하위 요소 선택
$(조상_선택자 하위_선택자)
.detach()선택 요소를 DOM에서 제거, 요소와 관련된 데이터 및 이벤트 처리 유지 및 저장$(선택자).detach();
.die()요소에서 이벤트 핸들러 제거

- 1.7버전부터는 .live() 및 .die() 미사용
- 이벤트 위임 : .on() 사용
- 이벤트 핸들러 제거 : .off() 사용
$(선택자).off(이벤트_유형, [하위_선택자], [이벤트_핸들러]);
:disabled SelectorHTML 폼 요소 중 사용자 입력이 비활성화된 요소 선택$(":disabled")
.each()선택 요소 집합에 대해 각 요소의 반복 작업 수행$(선택자).each(function(index, element) {
  // 작업 수행
});
Element Selector("element")특정 HTML 요소 선택을 위한 선택자$("element")
.empty()선택 요소 내용을 모두 제거$(선택자).empty();
:empty SelectorHTML 요소 중 비어있는 요소 선택$(":empty")
:enabled SelectorHTML 폼 요소 중 활성화된 요소 선택$(":enabled")
.end()이전 선택 요소 집합에서 마지막 선택 요소 집합으로 복귀$(선택자).method1().method2().end();
.eq()선택 요소 집합 중 특정 인덱스에 해당하는 요소 선택$(선택자).eq(index);
:eq() Selector특정 인덱스에 해당하는 요소 선택$(선택자:eq(index))
.error()요소 내 에러 발생 시 실행 함수 정의$(window).error(function(event) {
  // 에러 처리 작업 수행
});
.even()짝수 번째 요소 선택 
:even Selector짝수 번째 요소 선택$("선택자:even")
event.currentTarget현재 이벤트 발생 요소$(선택자).on("이벤트", function(event) {
  var currentElement = event.currentTarget;
  // currentElement를 사용하여 작업 수행
});
event.data이벤트 핸들러 함수에 데이터 전달 및 저장$(선택자).on("이벤트", 데이터, function(event) {
  var eventData = event.data;
  // eventData를 사용하여 작업 수행
});
event.delegateTarget이벤트 위임이 적용된 부모 요소$(부모선택자).on("이벤트", 자식선택자, function(event) {
  var delegateTargetElement = event.delegateTarget;
  // delegateTargetElement를 사용하여 작업 수행
});
event.isDefaultPrevented()이벤트의 기본 동작 여부 확인$(선택자).on("이벤트", function(event) {
  if (event.isDefaultPrevented()) {
    // 이미 기본 동작이 막혀있는 경우의 처리
  } else {
    // 기본 동작이 막혀있지 않은 경우의 처리
  }
});
event.isImmediatePropagationStopped()이벤트의 전파 중지 여부 확인$(선택자).on("이벤트", function(event) {
  if (event.isImmediatePropagationStopped()) {
    // 이벤트 전파가 이미 중지된 경우의 처리
  } else {
    // 이벤트 전파가 중지되지 않은 경우의 처리
  }
});
event.isPropagationStopped()이벤트의 전파 중지 여부 확인$(선택자).on("이벤트", function(event) {
  if (event.isPropagationStopped()) {
    // 이벤트 전파가 이미 중지된 경우의 처리
  } else {
    // 이벤트 전파가 중지되지 않은 경우의 처리
  }
});
event.metaKey이벤트 발생 시 메타 키 동작 여부를 나타내는 부울값$(document).on("keydown", function(event) {
  if (event.metaKey) {
    alert("메타 키(Ctrl 또는 Command)가 눌려졌습니다.");
  } else {
    alert("메타 키가 눌려지지 않았습니다.");
  }
});
event.namespace이벤트 핸들러 함수 바인딩 시 지정된 네임스페이스$(선택자).on("이벤트.네임스페이스", function(event) {
  // 이벤트 핸들러 내용
});
event.pageX마우스 이벤트 중 마우스 커서의 현재 페이지 X좌표$(선택자).on("mousemove", function(event) {
  var pageX = event.pageX;
  // pageX를 사용하여 작업 수행
});
event.pageY마우스 이벤트 중 마우스 커서의 현재 페이지 Y좌표$(선택자).on("mousemove", function(event) {
  var pageY = event.pageY;
  // pageY를 사용하여 작업 수행
});
event.preventDefault()이벤트 기본 동작 취소 및 중지$(선택자).on("이벤트", function(event) {
  event.preventDefault();
  // 원하는 작업 수행
});
event.relatedTarget이벤트 발생 요소와 이벤트 이동 후 포커스를 가진 요소 간의 관계 표현$(선택자).on("mouseover", function(event) {
  var relatedTarget = event.relatedTarget;
  // relatedTarget을 사용하여 작업 수행
});
event.result이벤트 핸들러 실행 후 이벤트 결과 저장$(선택자).on("사용자_정의_이벤트", function(event) {
  event.result = "이벤트 처리 결과";
});
event.stopImmediatePropagation()이벤트 전파 중 이벤트 처리 단계에서 다른 동일 이벤트 유형의 이벤트 핸들러 실행 저지$(선택자).on("이벤트", function(event) {
  event.stopImmediatePropagation();
  // 이후 핸들러 함수들의 실행을 막는 작업 수행
});
event.stopPropagation()이벤트 전파 중지$(선택자).on("이벤트", function(event) {
  event.stopPropagation();
  // 이벤트 전파 중지 후 작업 수행
});
event.target이벤트 발생 요소$(선택자).on("이벤트", function(event) {
  var targetElement = event.target;
  // targetElement를 사용하여 작업 수행
});
event.timeStamp이벤트 발생 시간$(선택자).on("이벤트", function(event) {
  var timeStamp = event.timeStamp;
  // timeStamp를 사용하여 작업 수행
});
event.type발생 이벤트 유형$(선택자).on("이벤트", function(event) {
  var eventType = event.type;
  // eventType을 사용하여 작업 수행
});
event.which키보드/마우스에서 동작한 버튼 릴리스 종류 및 여부$(선택자).on("이벤트", function(event) {
  var keyCodeOrButton = event.which;
  // keyCodeOrButton를 사용하여 작업 수행
});
반응형

'jQuery' 카테고리의 다른 글

jQuery API (1)  (0) 2023.08.31
jQuery 문제풀이  (0) 2023.02.15
윤년을 포함한 입력한 날짜의 요일 계산  (0) 2023.01.25
jQuery 문제 풀이 (16번~21번)  (0) 2023.01.25
jQuery 문제 풀이 (11번~15번)  (0) 2023.01.25
Comments