1. jQuery 시작하기
장점
- 간결한 문법
- 편리한 API
- 크로스 브라우징
https://releases.jquery.com/ 에서 최신버전 minified code 복사해
html상에 붙이면 인터넷 상의 jQuery library 이용 가능(CDN)
ex)
$(선택자).행위;
before
document.getElementById('content').value;
After
$('#content').val();
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 기초</title>
</head>
<body>
<h1>jQuery 기초</h1>
<textarea id="content">jQuery를 배워보자</textarea>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script>
console.log($('#content').val());
</script>
</body>
</html>2. jQuery Event
Before
<button id='click' onclick='hello();'>클릭</button>: 이걸 클릭했을 때 hello라는 함수가 실행된다.
After
<button id='click'>클릭</button>
$('#click').click(hello);: jQuery위와 동일하게 구현
3. 익명 함수
: 이름이 없는 함수.
before
function hello() {
console.log('hello');
}
$('#click').click(hello);After
$('#click').click(function(){
console.log('hello');
})4. 미니스타크래프트 만들기
침 뱉는 코드
<script>
//$() .click() 익명함수
$('#drone').click(function(){
console.log('침 발사');
});
</script>침 뱉기 구현
jQuery 공식문서 - Effect - fading - fadeIn
https://api.jquery.com/fadeIn/
<script>
$('#drone').click(function(){
// $() .
$('#spit').fadeIn();
});
</script>
침 이동
.animate
.animate(properties) : 변화 할 CSS
.animate(properties, [duration], [easing], [complete])
:
duration - 지속시간
easing - transition 형태가 어떻게 되는지
complete - 완료 됐을 때 어떤 걸 동작할지
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
});
</script>침 사라지기 & 침 원상복귀
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(); -> 사라지기
$('#spit').css({left: '150px'}); -> 원상복귀
});
</script>HP 감소 만들기
<script>
var hp = 3;
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(); -> 사라지기
$('#spit').css({left: '150px'}); -> 원상복귀
hp = hp =1;
$('#hp').text('HP :' + hp);
});
</script>시간이 오래 걸리는 코드가 실행되는 동안 빨리 실행되는 코드가 미리 실행되어버리는 경우
-> callback 사용
callback = function()
<script>
var hp = 3;
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(function(){
hp = hp - 1;
$('#hp').text('HP :' + hp);
});
$('#spit').css({left: '150px'});
});
</script>HP 0 = 벙커 사라지기 (if, fadeOut)
<script>
var hp = 3;
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(function(){
hp = hp - 1;
$('#hp').text('HP :' + hp);
if(hp == 0) {
$('#bunker').fadeOut();
}
});
$('#spit').css({left: '150px'});
});
</script>