자바스크립트 기초 jQuery편

안녕하세요 홍가 입니다.

오늘은 jQuery 사용 법을 알려드릴게요.

 

Download jQuery | jQuery

CDN방식이 있고 파일을 다운하는 방식이 있습니다. 

 저는 다운하는 방식으로 진행을 했습니다.

 

자바스크립트로 스타일을 줘서 글씨 색을 변경시켰습니다.

menu2의 자식 li에 for문을 걸어 문자열이니까 length를 사용했습니다.

 

jQuery를 사용하면 자바스크립트보다 코드를 단축시킬 수 있습니다.

코드를 해석한다면 (준비가 되었다면 menu2에 있는 li부분 color를 f00로 바꿔주라.)

라고 해석이 됩니다.

 

 

버튼을 누르면 사진을 이동시키는 코드를 만들었습니다.

animate는 자바스크립트 단일 애니메이션을 만들어줍니다.

 

hide와 show를 이용하여 버튼을 누르면 숨기기랑 보이기가 가능한 코드를 만들었습니다.

 

 

이미지를 흔들어보는 코드를 만들어 봤습니다.

변수를 넣어주고 css에 넣어서 흔들기가 가능합니다.