[SIST] Web_jquery_days08(사실상 1일차)

1. 제이쿼리(jquery)란?

- jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리

- 여러 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여
1) HTML 문서 탐색 및 조작 (DOM)
2) 이벤트 처리
3) 애니메이션 및 Ajax
위와 같은 작업을 훨씬 더 간단하게 만듦

- 다목적성과 확장성의 조합으로 jQuery는 수백만 명의 사람들이 JavaScript를 작성하는 방식을 변화시킴

 

2. jquery 사용하는 방법

1) 다운로드

ㄱ. 압축  => jquery-3.6.0.min.js

- 대역폭 절약, 프로덕션 성능 향상 시킴

 

ㄴ. 비압축 => jquery-3.6.0.js

- 개발 또는 디버깅에 가장 잘 사용됨

 

즉, 개발할 때는 비압축으로 사용, 배포할 때는 압축으로 사용

 

- jQuery 사이트에 들어간 후 Download 클릭

 

2) CDN(Content Delivery Network)

- CDN을 호스팅해서 사용하는 방법

- 직접 다운로드를 하지 않고 사용할 수 있는 이점

- 전 세계에 분포되어 있는 jquery를 제공해주는 서버를 이용

 

- jQuery 사이트에 들어간 후 Download 클릭 후 CDN 부분으로 내려가면 확인 가능

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> => google CDN

---

3. jquery 구문

- html 요소를 선택하고나서 어떤 작업(action)을 수행하도록 되어 있다.

 

- [기본 구문]

1) jquery 선택(selector) >> css 선택자(selector) = 범위는 jquery가 더 많음

2) 작업(action)

$(jquery selector).action

$(제이쿼리 선택자).작업

 

- 문서 로드가 완료되어 사용할 준비가 되었을 때 == ready

$(document).ready(function(){}); == $(function(){});

> 위의 코딩을 안하면 script를 body 닫는 태그 위에 올려야함

 

$ == jQuery == window.jQuery == window.$

---

4. on() 메서드

- 선택한 요소에 하나 이상의 이벤트 핸들러를 연결하는 메서드

---

5. jquery 효과(effects)

- basics

.show(), .hide(), .toggle()

 

- fading

.fadeIn(), .fadeOut(), .fadeTo(), .fadeToggle()

 

- Sliding

.slideDown(), .slideToggle(), .slideUp()

 

- Custom

.animate(),

.clearQueue(), .delay(), .dequeue(), .finish(), jQuery.fx.interval, jQuery.fx.off, jQuery.speed, .queue(), .stop()

 

[효과에 사용되는 매개변수...]

duration	애니메이션이 실행되는 시간을 설정하는 매개변수 Number:밀리세컨드 String:"slow"==600ms, "fast"==200ms, default==400ms
easing	애니메이션이 진행하는 속도를 설정하는 매개변수 "linear" : 선형적으로 변화
complete	콜백함수 : 애니메이션이 종료된 후 실행되는 메소드

---

1) basics

- .hide([duration [, easing] [, complete]]) : 숨기기

- .show([duration [, easing] [, complete]]) : 보이기

- .toggle([duration [, easing] [, complete]]) : 보이는 요소는 안보이게, 안보이는 요소는 보이게 함

 

---

2) fading

- fadeIn( [duration ] [, easing ] [, complete ] ) : 희미하게 천천히 보이도록 하는 메서드
- fadeOut( [duration ] [, easing ] [, complete ] ) : 희미하게 천천히 보이지않도록
- fadeTo( duration, opacity [, easing ] [, complete ] ) : 설정한 투명도값까지만 희지해지도록
- fadeToggle( [duration ] [, easing ] [, complete ] ) : 희미해진것을 뚜렷하게, 뚜렷한 것을 희미하게

* show(), hide()와의 차이점은 투명도가 있는 듯한 느낌(희미함)

 

fadeIn 예시)

 

---

fadeOut, fadeTo 예시)

 

---

fadeToggle 예시)

 

- fade Toggle p1 버튼 클릭시 p1 태그가 보였다가 안보였다가함

- fade Toggle p2 버튼 클릭시 p2 태그 요소가 보이거나 사라진 뒤 완료!를 출력

---

3) sliding

- slideDown( [duration ] [, easing ] [, complete ] ) : 요소를 아래로 내리면서 보여줌

- slideUp( [duration ] [, easing ] [, complete ] ) : 요소를 위로 올리면서 사라지게함

- slideToggle( [duration ] [, easing ] [, complete ] ) : 요소가 보이면 위로 올리고, 안보이면 내려서 보이게함

 

 

---

4) custom

- animate({params}, duration, callback) : 애니메이션 효과를 주는 것

 

 

animate는 days09에 이어서 정리되었습니다.