🍁전용 함수와 범용 함수
전용 이벤트 함수
- 객체.이벤트함수(콜백함수)
$('#btn1').click(function() {
alert();
});위 코드는 클릭 이벤트만을 처리하는 함수이다.
이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다.
범용 이벤트 함수
- 객체.on(이벤트명, 콜백함수)
$('#btn2').on('click', function() {
alert();
})on은 범용 함수로, 이벤트명을 입력해야 한다.
이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다.
반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다.
🍁Effect Function
1. hide(time), show(time), toggle(time)
2. fadeOut(time), fadeIn(time), fadeToggle(time)
3. slideUp(time), slideDown(time), slideToggle(time)
4. animate(object): 사용자 정의
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: gold;
}
</style>
</head>
<body>
<h1>jQuery Effect</h1>
<input type="button" value="버튼1" id="btn1" class="btn">
<input type="button" value="버튼2" id="btn2" class="btn">
<input type="button" value="버튼3" id="btn3" class="btn">
<hr>
<div id="box">상자</div>
<script src="../asset/js/jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html>
hide, show, toggle
$('#btn1').click(function() {
$('#box').hide();
});
$('#btn2').click(function() {
$('#box').show();
});
$('#btn3').click(function() {
$('#box').toggle();
});hide는 CSS를 숨기고, show는 CSS를 보이게 한다.
toggle은 CSS를 보이게 하는 기능과 안 보이는 하는 기능을 혼자 담당한다.
매개변수 조작
$('#btn1').click(function() {
$('#box').hide(1000);
});
$('#btn2').click(function() {
$('#box').show(1000);
});
$('#btn3').click(function() {
$('#box').toggle(1000);
});$('#btn1').click(function() {
$('#box').hide('fast');
});
$('#btn2').click(function() {
$('#box').show('slow');
});
$('#btn3').click(function() {
$('#box').toggle(1000);
});
ms 또는 키워드로 animation을 줄 수 있다.
키워드 fast는 0.4초, slow는 0.8초 정도 된다.
fadeOut, fadeIn, fadeToggle
$('#btn1').click(function() {
$('#box').fadeOut();
});
$('#btn2').click(function() {
$('#box').fadeIn();
});
$('#btn3').click(function() {
$('#box').fadeToggle();
});크기에는 변함이 없고 서서히 나타나거나 서서히 사라진다.
slideUp, slideDown, slideToggle
$('#btn1').click(function() {
$('#box').slideUp();
});
$('#btn2').click(function() {
$('#box').slideDown();
});
$('#btn3').click(function() {
$('#box').slideToggle();
});
슬라이드가 올라가면서 또는 내려가면서 사라지거나 나타난다.
🍂animate
animate로 사용자가 직접 animation을 만들어서 적용할 수 있다.
객체를 인자로 적용
const obj = {
width: '400px',
height: '400px'
};
$('#box').animate(obj);animate에는 CSS를 어떻게 변경할지에 대한 정보가 있는 객체를 인자로 넣는다.
객체는 내 마음대로 프로퍼티를 추가할 수 있고, 프로퍼티 간에 순서도 상관이 없다. 쉽게 말하자면 옵션값을 주기 쉽고, 조작이 편하기 때문에 객체를 넣는 것이다.
옵션값을 바로 적용
$('#box').animation({
프로퍼티명: 값
});$('#box').animate({
width: '400px',
height: '400px'
});jQuery의 장점은 코드를 짧게 만든다는 것이다. 객체를 만들지 않고 바로 속성을 넣을 수 있다.
animate에 넣을 수 있는 값이 있고, 넣을 수 없는 값이 있다. animate의 대상은 숫자형만 가능하기 때문에 display와 같은 속성은 넣을 수 없다.
px단위 생략
$('#box').animate({
width: '+=100px',
height: '+=50'
});
jQuery는 단위가 붙지 않으면 px로 생각하기 때문에 px을 사용하는 경우 단위를 생략할 수 있다.
캐멀 표기법 사용
$('#box').animate({
//margin-left: '+=50px'
'margin-left': '+=50px',
marginLeft: '+=50px'
}, 1000);
캐멀 표기법을 사용하거나 ''안에 속성명을 넣어 서식을 적용할 수 있다.
complete
$('#box').animate({
marginLeft: '+=50px'
}, 1000, function() {
alert('animation이 끝날 때 하고 싶은 일')
});$('#box').animate({
marginLeft: '+=50px'
}, 1000, function() {
$('h1').text('jQuery Effect ' + n);
n++;
if (n > 5) {
$('#btn1').off('click');
}
});
animation이 끝난 뒤에 하고 싶은 일이 있을 경우에 작업을 추가할 수 있다.
순차적인 animation
//1번째 방법
$('#btn2').click(function() {
$('#box').animate({
width: '400px'
});
$('#box').animate({
height: '400px'
});
});//2번째 방법
$('#btn2').click(function() {
$('#box').animate({
width: '400px'
}, 500, function() {
$('#box').animate({
height: '400px'
}, 500);
});
});//3번째 방법
$('#btn2').click(function() {
$('#box').animate({
width: '400px'
}).animate({
height: '400px'
});
});위 3개의 코드는 animation을 순차적으로 연달아 적용하는 코드이다.
앞서 진행 중인 이벤트가 있을 경우 끝나기를 기다렸다가 다음으로 넘어간다.
거의 대부분의 jQuery 메서드는 반환값이 jQuery 객체이다.
3번째 방법은 animation이 끝나면 자기 자신을 반환함으로써 다음 animation을 적용하는 원리이다.
메서드 체인
$('#btn2').click(function() {
$('#box')
.slideUp()
.slideDown()
.fadeOut()
.fadeIn()
.animate({
borderWidth: '10px'
});
});jQuery 메서드의 반환값이 jQuery 객체인 것을 이용하여 메서드 체인으로 여러 이벤트를 짧은 코드로 적용할 수 있다.
