제이쿼리 학습 정리-3

# 제이쿼리 학습 정리

# 이벤트가 발생한 요소 추적하기

• $(this) 선택자 : 이벤트가 발생한 요소를 선태갛여 이벤트가 발생한 요소를 추적할 수 있다.
• index() 인덱스 반환 메서드 : 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환한다.

index() 이벤트 메서드 기본형
$("이벤트 대상 선택").on("이벤트 종류", function() {
	$("이벤트 대상 선택").index(this);
});

 

# 그룹 이벤트 등록 메서드

• 그룹 이벤트 등록 메서드 사용 시 한 번에 2개 이상의 이벤트를 등록할 수 있다.

## 그룹 이벤트 등록 메서드의 종류

1. on()
- 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.
- 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
- on() 메서드의 기본형
	$([document | "이벤트 대상 상위 요소 선택"]).on("이벤트 종류", "이벤트 대상 선택", function() {
		자바스크립트 코드;
	});


2. bind()
- 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.


3. delegate()
- 선택한 요소의 하위 요소에 이벤트를 등록한다.
- 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트를 적용한다.
- delegate() 메서드 기본형
	$([document | "이벤트 대상 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류", function() {
		자바스크립트 코드;
	});


4. one()
- 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다.
- 지정한 이벤트가 1회 발생하고 자동으로 해제된다.
- one() 메서드 기본 이벤트 등록 방식
	$("이벤트 대상 선택").one("이벤트 종류", function() {
		자바스크립트 코드;
	});
- one() 메서드 라이브 이벤트 등록 방식
	$([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 선택", function() {
    	자바스크립트 코드;
    });

## 이벤트 제거 메서드의 종류

1. off()
- on() 메서드로 등록한 이벤트를 제거한다.
- on() 이벤트 해제를 위한 off() 메서드
- 기본 이벤트 제거 방식
	$("이벤트 대상 요소 선택").off("이벤트 종류")
- 라이브 이벤트 제거 방식
	$([document | "이벤트 대상의 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 요소 선택");


2. unbind()
- bind() 메서드로 등록한 이벤트를 제거한다.
- bind() 이벤트 해제를 위한 unbind() 메서드
	$("이벤트 대상의 요소 선택").unbind("이벤트 종류")
    
    
3. undelegate()
- delegate() 메서드로 등록한 이벤트를 제거한다.
- delegate() 이벤트 해제를 위한 undelegate() 메서드
- 기본 이벤트 제거 방식
	$("이벤트 대상 요소 선택").undelegate("이벤트 종류")
- 라이브 이벤트 제거 방식
	$([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류")

 

# 효과 메서드

• 효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드가 있다.
• 숨김

1. hide()
- 요소를 숨긴다.

2. fadeOut()
- 요소가 점점 투명해지면서 사라진다.

3. slideUp()
- 요소가 위로 접히며 숨겨진다.

• 노출

1. show()
- 숨겨진 요소가 노출된다.

2. fadeIn()
- 숨겨진 요소가 점점 선명해진다.

3. slideDown()
- 숨겨진 요소가 아래로 펼쳐진다.

• 노출, 숨김

1. toggle()
- hide(), show() 효과를 적용한다.

2. fadeToggle()
- fadeIn(), fadeOut() 효과를 적용한다.

3. slideToggle()
- slideUp(), slideDown() 효과를 적용한다.

4. fadeTo()
- 지정한 투명도를 적용한다.
- fadeTo() 기본형
	$("요소 선택").fadeTo(효과 요소 시간, 투명도, 콜백 함수)

• 효과 메서드의 기본형

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

- 효과 소요 시간 : 효과를 숨기거나, 노출할 때 소요되는 시간(1초=1,000)
- 가속도 : 숨기거나 노출하는 동안의 가속도
		1. swing : 시작과 끝은 느리게, 중간은 빠른 속도로 움직인다.(기본값)
        2. linear : 일정한 속도로 움직인다.
- 콜백 함수 : 노출과 숨김 효과가 끝난 후 실행 할 함수이다.(생략 가능)

 

# 동작을 불어넣는 애니메이션 메서드

## 애니메이션 메서드

• 애니메이션 메서드를 이용하여 스타일을 적용한 요소를 움직이게 할 수 있다.

animate() 메서드
- 선택한 요소에 다양한 동작(Motion) 효과를 적용 할 수 있다.
- animate() 메서드의 기본형
	$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수);
    
    - 스타일 속성 : 애니메이션으로 적용할 스타일의 속성
    - 적용 시간 : 동작에 반응하는 데 소요되는 시간(1초=1,000)

## 애니메이션효과 제어 메서드

• 효과 또는 애니메이션이 적용된 요소의 동작을 제어하는 메서드
• 애니메이션 적용 원리와 큐의 개념

애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장된다.

큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.

• 애니메이션 효과 제어 메서드의 종류

1. stop()
- 현재 실행 중인 효과를 모두 정지 시킨다.
- stop() 메서드의 기본형
	$("요소 선택").stop();
    $("요소 선택").stop(clearQueue, finish);
    
    
2. delay()
- 지정한 시간만큼 지연했다가 애니메이션을 진행한다.
- delay() 메서드의 기본형
	$("요소 선택").delay(지연 시간).애니메이션 효과 메서드();
    

3. queue()
- 큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아 반환한다.
  그리고 queue() 메서드 이후 애니메이션 효과 메서드는 모두 취소한다.
- queue() 메서드의 기본형
	- 큐(Queue)의 함수 반환
    	$("요소 선택").queue();
    - 큐(Queue)의 함수 추가
    	$("요소 선택").queue(function() {자바스크립트 코드; });
        

4. clearQueue()
- 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거한다.
- clearQueue() 메서드의 기본형
	$("요소 선택").clearQueue();
    
    
5. dequeue()
- queue() 메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거된다.
  하지만 de-queue() 메서드를 이용하면 메서드가 제거되는 것을 막을 수 있다.
- dequeue() 메서드의 기본형
	$("요소 선택").dequeue();
    
    
6. finish()
- 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

 

# Ajax

• 비동기 방식의 자바스크립트와 XML을 가리킨다.

## 동기 방식과 비동기 방식의 차이점

1. 동기 방식
- 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.


2. 비 동기 방식
- 서버에 신호를 보냈을 때 응답상태와 상관없이 다음 동작을 수행할 수 있다.

## Ajax를 사용하는 이유, 사용 전후 비교

• Ajax를 사용하는 이유 : 화면 전환 없이 클라이언트와 서버간에 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위해

## Ajax 사용 전과 후 비교

1. Ajax 사용 전
- 사용자가 자료 요청 시 반드시 서버 컴퓨터를 거쳐야 자료를 요청할 수 있었다. 
  이 방식으로 자료 요청 시 잠시 페이지가 서버 스크립트 페이지로 갱신되어 화면이 깜빡거리고 그동안 사용자는 어떤 작업도 불가능 했다.


2. Ajax 사용 후
- 사용자가 서버에 자료 요청 시 서버 스크립트 페이지를 거치지 않고 자료를 받아 올 수 있다.
- 사용자는 서버에 자료를 요청하는 사이에도 다른 작업이 가능하다.

## Ajax 관련 메서드의 종류

1. load()
- 외부 콘텐츠를 가져올 때 사용한다.
- load() 메서드의 기본형
	$(요소 선택).load(url, data, 콜백 함수);
    

2. $.ajax()
- 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, 
  HTML XML, JSON, 텍스트 유형의 데이터를 요청 할 수 있는 통합적인 메서드이다.
- $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이다.


3. $.post()
- 데이터를 서버에 HTTP POST 방식으로 전송 후 서버 측의 응답을 받을 때 사용한다.


4. $.get()
- 데이터를 서버에 HTTP GET 방식으로 전송 후 서버 측의 응답을 받을 때 사용한다.


5. $.getJSON()
- 데이터를 서버에 HTTP GET 방식으로 전송 후 서버 측의 응답을 JSON 형식으로 받을 때 사용한다.


6. $.getScript()
- Ajax를 이용하여 외부 자바스크립트를 불러온다.


7. .ajaxStop(function(){...})
- 비 동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행된다.


8. .ajaxSuccess(function(){...})
- ajax 요청이 성공적으로 완료되면 함수가 실행된다.


9. .ajaxComplete(function(){...})
- ajax 통신이 완료되면 함수가 실행된다.

Ajax의 기본형

$.ajax({
	url: "전송 페이지"(action url),
    type: "전송 방식"(get, post방식),
    data: "전송 데이터",
    dataType: "요청한 데이터 형식" ("html", "xml", "json", "text", "jsonp"),
    success: function(data) {
    	전송에 성공하면 실행될 코드;
    },
    error: function() {
    	전송에 실패하면 실행될 코드;
    }
});

- url : 데이터 전송 및 요청할 외부 주소를 입력한다.
- type : 전송 방식을 입력한다.
- data : 전송할 데이터를 입력한다.
- dataType : 서버로부터 받아 올 데이터의 형식을 지정한다.
- success : 데이터 전송 및 요청이 정상적으로 이뤄지면 함수가 실행된다.
  이때 매개변수(result)에는 요청한 데이터가 저장된다.

## $.ajax() 메서드의 옵션 종류

1. async
- 통신을 동기 또는 비 동기 방식으로 설정하는 옵션이다.
- 기본값은 비 동기 통신 방식인 true
- 비 동기 방식인 경우 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업이 가능하다.


2. beforeSend
- 요청하기 전 함수를 실행하는 이벤트 핸들러


3. cache
- 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정한다.
- 기본값은 true


4. complete
- Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러


5. contentType
- 서버로 전송할 데이터의 content-type을 설정한다.
- 기본값은 application/x-www-form- ur-lencoded


6. data
- 서버로 전송할 데이터를 지정한다.


7. dataType
- 서버에서 받아올 데이터의 형식을 지정한다.
- 생략 시 요청한 자료에 맞게 자동으로 형식이 설정된다.


8. error
- 통신에 문제가 발생했을 때 함수를 실행한다.


9. success
- Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행한다.


10. timeout
- 통신 시간을 제한한다. (시간 단위는 밀리초)


11. type
- 데이터를 전송할 방식을 설정한다. (get, post)


12. url
- 데이터를 전송할 페이지를 설정한다.
- 기본값은 현재 페이지


13. username
- HTTP 액세스를 할 때 인증이 필요한 경우, 사용자의 이름을 지정한다.

## Ajax 전송 데이터 가공 메서드의 종류

1. serialize()
- 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 
  'name1=value1 & name2=value2, ..'와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다.


2. serializeArray()
- 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 
  [{name1:value1}, {name2:value2}]와 같은 배열 객체로 변환해 반환한다.
  
  
3. $.param()
- {name1:value1, name2:value2} 와 같이 작성된 객체를 가공해
  'name1=value1 & name2=value2, ..'와 같은 쿼리 스트링 형식의 데이터로 변환해 반환한다.
  
  
4. JSON.parse()
- 객체 형태로 작성한 문자열 데이터를 객체로 가공해 반환한다.


5. JSON.stringfy()
- 객체를 문자열 데이터로 가공해 반환한다.

## Ajax로 JSON 데이터 바인딩하기

• 바인딩 : '묶다'라는 의미로, 비 동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고 데이터베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 의미한다.

 

# 제이쿼리 플러그인

• 여러 개발자가 유용한 기능 등을 구현해 놓은 프로그램을 자바스크립트 파일로 제공하는 제이쿼리 라이브러리이다.
• 플러그인을 상업적으로 사용하려면 저작권에 주의해야 한다.
• 무료 저작권의 종류

1. 자유 수정 가능
- MIT, BSD, Apache, Public Domain, Free


2. 수정 시 부분 공개
- LGPL, MPL

 

출처 : Do it! 자바스크립트+제이쿼리 입문책