Recent Posts
Recent Comments
05-02 08:26
«   2026/05   »
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
31
Today
Total
관리 메뉴

생각을 IT다

jQuery API (1) 본문

jQuery

jQuery API (1)

흑백논리 2023. 8. 31. 16:41
반응형

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

.add()선택된 요소 집합에 새로운 요소 추가$(선택자).add(새로운_선택자);
.addBack()이전 선택 요소 집합에 현재 선택 요소 추가$(선택자).addBack(필터);
.addClass()선택한 요소에 하나 이상의 CSS 클래스 추가$(선택자).addClass(클래스_이름);
.after()선택 요소 뒤에 요소/컨텐츠 삽입$(선택자).after(내용);
.ajaxComplate()모든 AJAX 요청 완료 시 처리 동작 정의

- event : 이벤트 객체
- xhr : XMLHttpRequest 객체
- settings : AJAX 요청 설정 객체
$(document).ajaxComplete(function(event, xhr, settings) {
  // AJAX 요청이 완료될 때 실행될 코드
});
.ajaxError()모든 AJAX 요청 실패 시 처리 동작 정의

- thrownError : 예외 객체
- jqxhr : jQuery XMLHttpRequest(XHR) 객체
$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
  // AJAX 요청 실패 시 실행될 코드
});
.ajaxSend()이벤트 핸들러를 통해 AJAX 요청 전송 직전 추가 동작 수행$(document).ajaxSend(function(event, jqxhr, settings) {
  // AJAX 요청이 전송되기 시작할 때 실행될 코드
});
.ajaxStart()첫번째 AJAX 요청 시작 전 실행$(document).ajaxStart(function() {
  // 첫 번째 AJAX 요청이 시작되기 전에 실행될 코드
});
.ajaxStop()모든 AJAX 요청 완료 시 실행$(document).ajaxStop(function() {
  // 모든 AJAX 요청이 완료된 후에 실행될 코드
});
.ajaxSuccess()AJAX 요청 성공 시 추가 작업 수행$(document).ajaxSuccess(function(event, xhr, settings) {
  // AJAX 요청이 성공적으로 완료될 때 실행될 코드
});
All Selector

("*")
페이지의 모든 요소 선택/조작/스타일 적용$("*").css("속성", "값");
.andSelf()선택 요소를 이전 선택 요소 집합에 추가$(선택자).andSelf();
.animate()CSS 속성을 애니메이션으로 변경

부드러운 효과의 동적 UI 구현 가능
$(선택자).animate(속성_값, 속도, 이징_함수, 콜백_함수);
:animated Selector현재 애니메이션 중인 요소 선택/조작$(선택자:animated)
.append()선택 요소 끝에 새 내용 추가

HTML 요소를 동적으로 추가/변경
$(부모_선택자).append(추가할_내용);
.appendTo()선택 요소를 지정한 부모 요소 끝에 추가

요소를 동적으로 이동 및 새로운 위치 추가 가능
$(추가할_요소).appendTo(부모_선택자);
.attr()선택 요소의 속성 값 호출/설정

요소의 속성 값을 동적으로 변경/읽기
기본 : $(선택자).attr(속성_이름);

속성 값 설정 : $(선택자).attr(속성_이름, 새_값);
Arribute Contains Prefix Selector

[name|="value"]
특정 속성 값이 특정 접두사인 요소 선택$("[속성|='접두사']");
Arribute Contains Selector

[name*="value"]
특정 속성 값에 특정 문자열 포함된 요소 선택$("[속성*='문자열']");
Arribute Contains Word Selector

[name~="value"]
특정 속성 값에 공백이 포함된 요소 선택$("[속성~='단어']");
Arribute End With Selector

[name$="value"]
특정 속성 값이 특정 값인 요소 선택$("[속성$='값']");
Arribute Equals Selector

[name="value"]
특정 속성 값이 지정 값과 일치 요소 선택$("[속성='값']");
Arribute Not Equals Selector

[name!="value"]
특정 속성 값이 지정 값과 불일치 요소 선택$("[속성!='값']");
Arribute Start With Selector

[name^="value"]
특정 속성 값이 특정 값으로 시작하는 요소 선택$("[속성^='값']");
.before()선택 요소 이전에 새 내용 추가$(선택한_요소).before(추가할_내용);
.bind()요소에 이벤트 연결

이벤트 발생 시 실행 함수 정의

- jQuery 3.0 이후로 ".on()" 대체
$(선택자).bind(이벤트_이름, 이벤트_핸들러_함수);
.blur()선택 요소에서 포커스 해제 시 실행 함수 지정$(선택자).blur(콜백_함수);
:button Selector<button>/<input> 요소 중 type 속성이 button 요소 선택$(":button")
callBacks

.add()
Deferred와 관련된 내부 구현에 사용 
callBacks

.disable()
Deferred객체의 콜백 함수 비활성화 
callBacks

.disabled()
Deferred객체의 콜백 함수 비활성화 여부 확인 
callBacks

.empty()
Deferred객체의 콜백 리스트를 비움 
callBacks

.fired()
콜백이 최소 한 번 호출 이상의 호출 여부 확인 
callBacks

.fireWith()
Deferred객체의 콜백  함수들을 특정 컨텍스트/인자 전달 후 실행 
callBacks

.has()
콜백 리스트에 특정 함수 등록 여부 확인 
callBacks

.lock()
콜백 리스트를 잠금 
callBacks

.remove()
콜백 리스트에 특정 콜백 함수 제거 
.change()<input>/<select>/<textarea>등의 폼 요소 값 변경 시 발생 이벤트 감지 혹은 요소 이벤트 핸들러 연결$(선택자).change(콜백_함수);
:checkbox SelectorHTML 폼 요소 중 type 속성이 "checkbox"인 요소를 선택$(":checkbox")
:checked SelectorHTML 폼 요소 중 선택된 체크박스 라디오 버튼 요소 선택$(":checked")
child Selector("parent>child")특정 부모 요소의 직접적인 자식 요소 선택$("parent > child")
.children()선택 요소의 모든 직계 자식 요소 선택$(선택자).children(필터);
Class Selector(".class")특정 클래스를 가진 요소 선택$(".class")
.clearQueue()애니메이션 큐에서 대기 중인 모든 애니메이션 제거$(선택자).clearQueue([queueName]);
.click()선택 요소 클릭 이벤트 바인딩 또는 클릭 이벤트 강제 발생$(선택자).click(콜백_함수);
.clone()선택 요소의 복제본 생성$(선택자).clone([withDataAndEvents]);
.closest()선택 요소의 조상 요소 중 특정 선택자에 가까운 요소 선택$(선택자).closest(부모_선택자);
:contains() Selector특정 텍스트 포함하는 요소 선택$(":contains(텍스트)")
.contents()선택 요소의 모든 자식노드/텍스트노드/주석 등 선택$(선택자).contents();
.context객체 생성 시 사용된 DOM 요소/문서 참조

컨텍스트에서 선택된 요소 알림
$(선택자, 컨텍스트);
.contextmenu()요소에 컨텍스트 메뉴 이벤트 연결$(선택자).contextmenu(콜백_함수);
.css()선택 요소의 CSS 속성 값 호출/설정$(선택자).css(속성);
.data()선택 요소 데이터 속성 값 호출/설정$(선택자).data(이름);
.dblclick()선택 요소에 더블 클릭 이벤트 연결$(선택자).dblclick(콜백_함수);

※Deferred※

jQuery에서 비동기 작업을 처리하고 관리하기 위한 도구
(AJAX 요청/타이머 함수/파일 로딩 등의 작업)
비동기 작업 상태 추적 및 작업 완료 시 실행 콜백 함수 지정 가능

반응형

'jQuery' 카테고리의 다른 글

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