[3일차] DO IT 자바스크립트 제이쿼리/p290 ~ p340/ 08.애니메이션 효과 , 09.Ajax

 

​hide() : 요소 숨김

fadeOut() : 요소가 점점 투명해지면서 사라짐

slideUp() : 요소가 위로 접히며 숨겨짐

​

show() : 숨겨진 요소 보여줌

fadeIn() : 숨겨진 요소 점점 선명해짐

slideDown() : 숨겨진 요소가 아래로 펼쳐짐

​

toggle() : hide(), show() 효과 적용

fadeToggle() : fadeIn(), fadeOut()

slideToggle() : slideUp(), slideDown()

fadeTo() : 지정한 투명도 적용

​

​

$("요소 선택").효과 메서드(효과 소요시간, 가속도, 콜백함수);

​

​

fadeTo()

$("요소 선택").효과 메서드(효과 소요시간, 투명도, 콜백함수);

​

animate() 동작효과 적용할때 사용

$("요소 선택").animate({스타일 속성}, 적용시간, 가속도, 콜백함수);

​

​

종류	설명
stop()	현재 실행 중인 효과를 모두 정지시킴.
delay()	지정한 시간만큼 지연했다가 애니메이션을 진행함.
queue()	큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담하 반환함. 그리고 queue() 메서드 이후의 애니메이션 효과 메서드는 모두 취소함.
clearQueue()	큐에서 처음으로 진행하고 있는 애니메이션만 제외. 대기 중인 애니메이션은 모두 제거.
dequeue()	queue() 메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거됨. dequeue() 메서드를 이용하면 메서드가 제거되는 것을 막을 수 있음.
finish()	선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료함.

​

ajax 메소드 정리

​

종류	설명
load()	외부 컨텐츠를 가져올 때 사용
$.ajax()	데이터를 서버에 HTTP POST, GET 방식으로 전송, HTML, XML, JSON, TEXT 유형에 데이터를 요청할 수 있는 통합적인 메서드, $.post(), $.get(), $.getJSON() 메서드의 기능을 합쳐 놓은 것
$.post()	데이터를 서버에 HTTP POST 방식으로 전송 후 서버 측 응답을 받을 때 사용
$.get()	데이터를 서버에 HTTP GET 방식으로 전송 후 서버 측 응답을 받을 때 사용
$.getJSON	데이터를 서버에 HTTP GET 방식으로 전송 후 서버 측 응답을 JSON 형식으로 받을 때 사용
$.getScript	Ajax를 이용하여 외부 자바스크립트를 불러올 때 사용
.ajaxStop(function(){....})	비동기 방식으로 서버에 응답 요청이 완료 되었을 때 함수 실행
.ajaxSuccess(function(){....})	ajax 요청이 성공적으로 완료되면 함수 실행
.ajaxComplete(function(){....})	ajax 통신이 완료되면 함수 실행

​

load() 메서드

사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다.

 

$(요소 선택).load(url , data, 콜백함수) -> data, 콜백함수 생략 가능

url : 외부 컨텐츠를 요청할 외부 주소

data : 전송할 데이터

콜백함수 : 전송이 완료되면 실행될 코드

​

​

$.ajax() 메서드

사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다.

불러올 수 있는 외부 데이터로 JSON, TEXT, XML, HTML 형식 등이 있다.

 

$.ajax({

url : "전송 페이지" (action url),

type : "전송 방식" (GET, POST),

data : "전송할 데이터",

dataType : "요청한 데이터 형식" ("json" , "jsonp" , "html", "text", "xml"),

success : function(data) {

전송에 성공하면 실행될 코드;

},

error : function() {

전송에 실패하면 실행될 코드;

}

});

​

​

​

$.ajax() 메서드의 옵션

종류	설명
async	통신을 동기 또는 비동기 방식으로 설정하는 옵션, 기본값은 비동기 통신 방식인 true로 설정
beforeSend	요청하기 전에 함수를 실행하는 이벤트 핸들러
cache	요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정, 기본값은 true
complete	Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러
contentType	서버로 전송할 데이터의 content-type을 설정, 기본값은 application/x-www-form-urlencoded
data	서버로 전송할 데이터를 지정
dataType	서버에서 받아올 데이터의 형식을 지정, 생략하면 요청한 자료에 맞게 자동으로 형식이 설정
error	통신에 문제가 발생할 경우 함수를 실행
success	통신이 정상적으로 일어났을 경우 이벤트 핸들러를 실행
timeout	통신 시간을 제한 (시간단위 : 밀리초)
type	데이터를 전송할 방식(get/post)을 설정
url	데이터를 전송할 페이지를 설정, 기본값은 현재 페이지
username	HTTP 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정

​

Ajax 전송 데이터 가공 메서드

종류	사용	설명
serialize()	$("form").serialize();	사용자가 입력 요소에 값을 입력한 데이터의 전송방식을 'name1=value1 & name2=value2, ....' 와 같은 쿼리 스트링 형식의 데이터로 변환해 반환
serializeArray()	$("form").serializeArray()	사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 [{name1 : value1, {name2 : value2}] 와 같은 배열 객체로 변환해 반환
$.param()	$.param(obj)	{name1 : value1, name2 : value2}와 같이 작성된 객체를 가공해 'name1=value1 & name2=value2,...' 와 같은 쿼리 스트링 형식의 데이터로 변환해 반환
JSON.parse()	JSON.parse('{"name" : "value"}');	객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환
JSON.stringify()	JSON.stringify({"name1" : "value1", "name2" : "value2"})	객체를 문자열 데이터로 가공하여 반환

​