[JQuery] JQuery의 기본

★JQuery는 자바스크립트를 간소화 해서 사용하기 위한 것이다.

★공식사이트 : https://code.jquery.com/jquery/
여기서 js파일을 설치하거나 참조해서 사용하면 된다.

★기본문법 : $(선택자).액션()
$ : 객체 접근자
(…) : HTML요소의 이름, 타입, 클래스, 아이디 등
액션() : 클릭, 키, 포커스 등 이벤트

★$선택자
태그를 참조할 때는 태그이름을 전달 $(“form”)
아이디를 참조할 때는 $(“#form”)
클래스를 참조할 때는 $(“.form”)
css를 참조할 때 처럼 하면 됨

★JQuery는 사용자 이벤트를 쉽게 핸들링 할 수 있게 해준다

★마우스 이벤트 핸들링 함수
${“something”}.click(function{…}) : 클릭 이벤트 감지
${“something”}.dblclick(function{…}) : 더블클릭 이벤트 감지
${“something”}.hover(function{…}) : 마우스 오버 이벤트 감지
${“something”}.mousedown(function{…})
${“something”}.mouseenter(function{…}) : 상속x
${“something”}.mouseleave(function{…}) : 상속x
${“something”}.mousemove(function{…})
${“something”}.mouseout(function{…}) : 상속가능
${“something”}.mouseover(function{…})

★키보드 이벤트 핸들링 함수
.keydown(f()) : KeyCode, KeyData, Modifiers 리턴
.keypress(f()) : 문자에 대해서만 호출, char타입 리턴
.keyup(f()) : KeyCode 리턴

★폼 이벤트 핸들링 함수
.submit(f()) : form을 submit하면 발생
.change(f()) : form의 내부의 input. textarea, select값이 변할때 발생.
.focus(f()) / .blur(f()) : form의 요소가 포커스를 얻으면/잃으면 발생
.focusin(f()) / .focusout(f()) : form의 요소가 포커스를 얻으면/잃으면 발생

★Document 이벤트 핸들링 함수
$(window).resize(f()) : 창 크기가 변경될 때 발생
.scroll(f()) : 스크롤 될때 발생

★애니메이션
.animate({style}, duration, easing, f()) : 객체가 뷰에 표시되거나 사라질 때 내장 애니메이션 사용

ex)
$('#button').click(function() {
	$('#view').animate(
		{opacity:0.25, left:'+=50', height: 'toggle'}, 5000, function() {...}
	)
})

.stop(stopAll:Boolean, goToEnd:Boolean) : 애니메이션 정지
stopAll : 요소의 다른 애니메이션도 정지할껀지
goToEnd : 현재 애니메이션을 바로 정지할껀지

.hide(duration, f()) : 요소를 숨김

.show(duration, f()) : 숨은 요소를 보임

${“something”}.toggle(duration, easing, f()) : 해당 Element가 hide와 show를 반복하게 함. click함수의 파라메터로 이 함수를 넣어주는 식으로 사용가능
duration : 애니메이션 지속시간을 설정
easing : 애니메이션에 사용되는 easing()함수(default:string)
콜백함수 : 애니메이션 종료시 실행

.fadeIn() : 나타내기 효과

.fadeOut() : 사라지는 효과

.fadeToggle() : 토글 + fadeIn(), fadeOut()

.fadeTo(duration, opacity, f()) : 투명도 조절(0~1)

.slideDown() : 아래로 슬라이드

.slideUp() : 위로 슬라이드

.slideToggle() : 슬라이드를 위아래로

★함수 콜백 : 콜백함수 관리
콜백함수는 여러 함수들을 큐에 쌓아 하나씩 실행
.add() : 콜백에 함수를 추가
.fire() : 큐에 쌓인 함수 실행
.remove() : 콜백에서 함수 제거
.disable() : 나머지 콜백함수 모두 실행 안함

function f1() {...}
function f2() {...}
function f3() {...}
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.add(f2);
callbacks.add(f3);
callbacks.fire();

★함수 체이닝 : 동일한 요소에 함수를 줄줄이 연결해 실행 가능, 실행 후 반환되는 값은 새로운 JQuery객체이기 때문에 가능

ex)
$("#p1").slideDown(100).slideUp(35);