JAVASCRIPT#58 - 제이쿼리에 대하여 Revisit

I live and die for a pony AJ, my body and soul, my life is not mine. if i should die for her then so be it. this life is meaningless without her.

JAVASCRIPT#58 - 제이쿼리에 대하여 (1)

0. 앞으로 공부해야 할 것들.

- 스크립팅 : 자바스크립트 + 제이쿼리

- 서버 : JSON AJAX PHP MYSQL

- 디자인 : 김프 픽센 

1. 제이쿼리 체이닝

- $("#ele").css("background-color", "red").children().css("background-color", "yellow");

- 한 요소를 선택하고 여러가지 액션을 명령 하는것을 체이닝 이라고 한다. 위의 코드는 ele라는 요소를 선택하고 배경색을 빨강으로 바꾸고 이후, 자식요소를 선택한후 배경색을 노란색으로 바꾸라고 명령하는 코드이다.

2. 제이쿼리의 다형성

- 한 코드도 전달 인자(파라미터)수에 따라 다양하게 해석될 수 있음을 다형성이라고 한다.

- $("#ele").css("left") 레프트값 반환하라. Getter.

- $("#ele").css("left", function(index, value){ return parseInt(value)+1; }); 레프트값을 +1 로 설정하라. Setter.

3. 제이쿼리 애니메이션

- $("#ele").animate({top:200}).animate({left:200});

- 큐잉 : 위의 코드를 실행하면 아래로 200 픽셀 이동 한다음 오른쪽으로 200 만큼 이동한다. 이처럼 animate 함수하나당 한 동작을 수행하며 여러개가 걸쳐있으면 순서대로 실행하는 대기열(queue) 방식을 사용한다. 대각선으로 이동하게 하고싶다면 한번에 .animate({top:200, left:200}) 이런식으로 써주면된다.

4. 제이쿼리 기타 애니메이션 커맨드

- 페이드인 페이드아웃: fadeIn(), fadeOut(), fadeTo()

- 감추기 보이기: hide(), show()

- 슬라이드: slideUp(), slideDown()
- 이들은 animate() 함수의 래퍼 wrapper 이다. 프로그래밍에서 래퍼란 어떤 요소가 작동하기위한 "구성요소"라고 보면 된다. 즉, 위의 함수들은 animate()함수를 구성하고 있는 놈(?)들이라고 봐도 된다.

5. 큐 관리 커맨드

- stop() : 현재 큐 애니메이션 종료하고 다음 애니메이션 실행

- clearQueue() : 모든 큐 애니메이션을 취소한다.

- dequeue() : 현재 애니메이션이 끝난것처럼 속이고 다음 애니메이션을 겹쳐서 실행시킨다.

- delay() : 애니메이션 완료후 해당 밀리세컨드만큼 기다리고 다음 큐 애니메이션을 실행시킨다.