jQuery 시작하기
jQuery 장점
1. 간결한 문법
2. 편리한 API
3. 크로스 브라우징(모든 브라우저, 모든 버전에서 동작)
접속하여 가장 최신버전의 'minified' 선택하여 코드 복사하여 붙여넣기
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
$('#content').val() : id가 content인 특정 요소의 value를 가져옴
<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>jQuery Event
$('#click').click(hello); : id가 click인 요소를 가져와 클릭시 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>익명 함수
이름이 없는 함수
여러번 쓸 일이 없는 함수를 이름없이 사용할 때 작성
<body>
<h1>익명 함수</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>
// 익명함수
$('#click').click(function(){console.log('hello')});
</script>
</body>미니 스타크래프트 1
드론을 클릭시 '침 발사' 문구가 콘솔에 출력되도록 코딩
<body>
<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>
//$() .click() 익명함수
$('#drone').click(function(){
console.log('침 발사');
});
</script>
</body>미니 스타크래프트 2
침 나타나기
jQuery로 침 이미지 선택하여 나타나도록 코딩
모든 기능에 대한 코드를 다 외우고 있을 수 없음. 구글링을 통해 알아봐도 무방하다! 'jQuery 나타나기' 검색하여 알아보자. 한글로 검색하여 안나오면 영어로 검색하면 많이 나온다.
jQuery 홈페이지에 접속하여 API Documents를 눌러보면 사용할 수 있는 기능에 대한 문서를 확인할 수 있다.
침 나타나기에 사용할 기능은 fadeIn()
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
});
</script>미니 스타크래프트 3
침 발사하여 벙커까지 이동하도록 구현 .animate()
.animate(properties, 선택사항, 선택사항, 선택사항)
<script>
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
});
</script>미니 스타크래프트 4
침이 발사된 후 없어지도록 구현 .fadeOut()
다시 클릭하면 사라진 곳에서 나타나게 되므로 원위치로 되돌리기
.css({원래의 위치})
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut();
$('#spit').css({left: '150px'});
});미니 스타크래프트 5
침을 맞을 때마다 벙커의 hp가 1씩 감소하도록 구현
.text() : 텍스트 입력
<script>
var hp = 3;
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut();
$('#spit').css({left: '150px'});
hp -= 1;
$('#hp').text('HP : ' + hp);
});
</script>코드는 위에서부터 순차적으로 실행되지만 fadeIn(), animate(), fadeOut() 실행이 완료되기까지 시간이 걸려 hp가 깍이는 시점이 맞지 않음을 알 수 있다.
시점을 맞추기 위해서 앞동작이 종료되면 실행되도록 콜백함수를 사용할 수 있음 (complete)
hp가 감소되는 코드는 fadaOut() 코드가 종료된 이후 다음 함수가 실행되도록 코딩
<script>
var hp = 3;
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(function(){
hp -= 1;
$('#hp').text('HP: ' + hp);
});
$('#spit').css({left: '150px'});
});
</script>미니 스타크래프트 6
벙커 HP가 0이 되면 벙커가 사라지도록 구현
<script>
var hp = 3;
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(function(){
hp -= 1;
$('#hp').text('HP: ' + hp);
if(hp == 0) {
$('#bunker').fadeOut();
}
});
$('#spit').css({left: '150px'});
});
</script>
미니 스타크래프트 정리
위 코드 작성시 실수한 부분
중간 중간 세미콜론(;)을 빼먹음
$('#spit').animate({left: '+=250'});
$('#spit').css({left: '150px'});
이 부분의 {left : '+=250'} 형식으로 써야하며
따옴표(')와 콜론(:) 사용 주의
