이하 구디아카데미 김지훈 강사님의 수업자료와 강의 내용 정리, 실습한 내용을 정리함!

list

• slide
• animate
• Animation(sample)
• slideUp(sample)
• slideUp(sample)
• 요소 추가(Element Add)
• 요소 추가(sample)
• 요소 삭제(Element Delete)

slide

• slideUp() : 요소가 아래서 위로 크기가 작아지며 사라지는 효과

• slideDown() : 요소가 위에서 아래로 크기가 커지며 나타나는 효과

• slideToggle() : 위 두개의 효과를 토글

  • $(...).slideDown(speed,callback);
  • $(...).slideUp(speed,callback);
  • $(...).slideToggle(speed,callback);
    • Speed :milliseconds,slow,fast
    • Callback : 효과가 끝나고 실행할 기능

• 입력
  
  

• 출력
  

• 영상
  

Animate

• Animate 를 활용하여 기존에 사용할 수 있는 기능들을 customize 할 수 있다.
• 기존에 있는 기능이 한정적이기 때문에 animate를 이용해서 자유롭게 활용할 수 있게 하였다.
• $(...).animate({params},speed, easing, callback);
  • Params : css 에서 정의할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정
  • Speed : 애니메이션이 시작해서 끝날 때까지 걸릴 시간
  • callback : 애니메이션 종료 후 일어날 기능
• $(...).stop();
  • 진행 중인 내용을 정지시킨다.
• Method Chanining : 각 기능들이 연결된 것처럼 맞물려서 연속적으로 일어남
  • $(셀렉터).css("color","red").slideUp(2000),slideDown(2000);
• 입력
  
• 출력
  
• 영상
  

Animation(sample)

• click 하면 #obj 가 클릭한 곳으로 이동하도록 코딩
• 마우스 포인트를 따라다니는 개체 생성
• 입력
  
• 영상
  

slideUp(sample)

• animation 사용하여 slide 기능 구현
• 입력
  
• 출력
  
• 영상
  

요소 추가(Element Add)

• 제이쿼리를 사용하면 자바스크립트보다 쉽게 요소를 추가할 수 있다.
• 요소 추가는 향후 자주 사용하게 될 기능이다.
  • $(셀렉터).append("추가 내용); : 선택한 요소 내 마지막 요소에 추가
  • $(셀렉터).prepend("변경 내용"); :선택한 요소 내 시작점에 추가
  • $(셀렉터).after("변경 내용"); : 선택한 요소의 시작점에 추가
  • $(셀렉터).before("변경 내용:); : 선택한 요소의 바로 앞부분에 추가
• 입력
  
• 출력
  
• 영상
  

요소 추가(sample)

• 입력
  
  

• 출력
  

• 영상
  

요소 삭제(Element Delete)

• remove() 와 empty() 를 통ㅇ해서 지정한 하위 요소를 삭제할 수 있다.
• 두 함수의 차이
  • $(...).remove(); : 선택한 요소와 하위 요소도 모두 삭제
  • $(...).empty(); : 선택한 요소의 하위 요소만 삭제(비워 냄)
• 입력
  
• 출력
  
• 영상
  

이것으로 J-Query 가 끝나고 내일부터 JAVA 를 들어갈 예정이다.
HTML, CSS, JAVA Script, J-Query를 하면서 배운 것들을 활용할 줄 알아야 JAVA 를 좀 더 잘 이해할 수 있을 테니 복습을... 해야 하는데...