웹프로그래밍 13주차

jQuery 라이브러리

 

<script src="http://code.jquery.com/jquery-3.1.0.js"></script> // jQuery 라이브러리 사용

 

&(선택자).메서드(매개변수, 매개변수)

 

&(document).ready(...); -> HTML 문서 로드가 완료되면 ... 실행

 

attr(); //문서 객체의 속성 조작

ex) var src = &('script').attr('src'); //속성을 추출

 

html(); //문서 객체 내부의 HTML 태그 조작 (HTML 효과 적용)

var text= &('h1').text(); -> 선택된 모든 객체 글자 추출

text(); //문서 객체 내부의 글자 조작 (단순 글자)

var html= &('h1').html(); -> 첫 번째 객체 글자 추출

 

클래스 조작

addClass() 클래스 추가

removeClass() 클래스 제거

toggleClass() 클래스 전환

 

hover(올릴 때, 내릴 때)

 

이벤트

on() 이벤트 연결

off() 이벤트 제거

ex) &(selector).on(eventName,eventHandler);

 

mouseover랑 mouseenter 거의 비슷

mouseout랑 mouseleave 거의 비슷

 

event.preventDefault(); // 서버로 입력 양식 전송 중단

 

시각 효과

show(속도) : 문서 객체가 커지며 표시

hide(속도) : 문서 객체가 작아지며 표시

toggle(속도) : show()메서드 hide()메서드 번갈아 실행

 

slideDown(속도) : 문서 객체가 슬라이드 효과와 함께 표시

slideUp(속도) : 문서 객체가 슬라이드 효과와 함께 사라짐

slideToggle(속도) : slideDown()메서드 slideUp()메서드 번갈아 실행

 

fadeIn(속도) : 문서 객체가 선명해지며 표시

fadeOut(속도) : 문서 객체가 흐려지며 표시

fadeToggle(속도) : fadeIn()메서드 fadeOut()메서드 번갈아 실행

 

속도 문자열

slow 600ms

normal 500ms

fast 400ms

 

애니메이션 효과 //큐 방식 선입선출

animate() 메서드

1. &(selector).animate(속성 객체);

2. &(selector).animate(속성 객체, 시간);

3. &(selector).animate(속성 객체, 시간, 콜백 함수// 모션 끝난 뒤 새로운 모션 실행);

 

일정시간 애니메이션 정지 : dealy()

애니메이션 중단 : stop()

ex0 &('h1').stop(clearQueue,goToEnd);

clearQueue (기본값)

- false - 현재 실행중인 애니메이션만 멈춤

- true - 예약된 모든 애니메이션 멈춤

goToEnd 매개변수 : 애니메이션 중지할 때 어떤 상태로 종료할지 지정

- false - 현재 상태 멈춤

- true - 마지막 상태로 가서 멈춤

 

setInterval(함수, 특정 시간); //특정 시간마다 함수 실행