JQuery 시작하기
자바 스크립트를 쉽게 사용할수 있도록 해주는 라이브러리
장점
-
간결한 문법
-
편리한 API
-
크로스 브라우징
JQuery 사이트 - 제일 최신 버전 minified 눌러서 링크 복사
JQuery 사이트
jquery.com -> 문법 정리 되어있음 , 대괄호는 선택 사항
기본적인 문법 : $(선택자).행위;
$('#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>
$('#content').val()
</script>
</body>
</html>JQuery Event
<button id='click'> 클릭 </button>
클릭 할때마다 콘솔에 hello 찍기
<body>
<h1>jQuery 이벤트</h1>
<button id="click">클릭</button>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
function hello() {
console.log('hello');
}
$('#click').click(hello)
</script>
</body>
익명 함수
이름이 없는 함수, 정의 하는 과정 없이 바로 사용
$('#click').click(function(){
console.log('hello');
});미니 스타크래프트 1
드론을 클릭하면 '침 발사' 로그로 표시
<script>
//$() .click() 익명함수
$('#drone').click(function(){
console.log('침 발사');
});
</script>미니 스타크래프트 2
드론 클릭하면 침 나타나도록 하기
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
});
</script>
미니 스타크래프트 3
침을 발사해서 목표물까지 이동하도록 -> .animate(css요소가 어떻게 변할지)
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
});
</script>미니 스타크래프트 4
침을 맞으면 없애기 ->.fadeOut();
벙커 앞으로 간 침 다시 원위치 시키기 -> 애니메이션 필요 없으니 .css() 사용해서 원래 위치로 옮기기
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut();
$('#spit').css({left: '150px'});
});
</script>미니 스타크래프트 5
HP를 추가해서 벙커가 맞을때마다 HP 감소하도록 하고 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>=> 순차적으로 실행되기 때문에 fadeOut 함수가 끝나고 피가 감소되는게 맞다
<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>=>fadeOut 안에 익명 함수 만들어서 함수가 끝나고 피 감소
미니 스타크래프트 6
벙커 HP가 0이 되면 벙커가 사라지도록 하기
<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>
미니 스타크래프트 최종
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타크래프트</title>
<style>
.background {
position: relative;
background-image: url('background.png');
background-size: 500px 330px;
width: 500px;
height: 330px;
}
#drone {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 60px;
}
#bunker {
position: absolute;
width: 150px;
height: 150px;
top: 80px;
right: 20px;
}
#spit {
display: none;
position: absolute;
top: 140px;
left: 150px;
width: 50px;
height: 30px;
z-index: 2;
}
</style>
</head>
<body>
<h1 id='hp'>HP: 3</h1>
<div class='background'>
<img id='drone' src="drone.png" alt="drone">
<img id='spit' src="spit.png" alt="spit">
<img id='bunker' src="bunker.png" alt="bunker">
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script>
var hp = 3;
$('#drone').click(function() {
$('#spit').fadeIn();
$('#spit').animate({'left': '+=250px'});
$('#spit').fadeOut(function(){
hp = hp - 1;
$('#hp').text('HP: ' + hp);
if (hp == 0) {
$('#bunker').fadeOut();
}
});
$('#spit').css({left: 150});
});
</script>
</body>
</html>
꾸준히 성장하는 개발자