jQuery
2023. 12. 11. 14:06
728x90
장점
1) 간결한 문법
2) 편리한 API
3) 크로스 브라우징 (모든 브라우저, 모든 버전에서 동일한 기능 동작)
사용방법
code.jquery.com > minified > html에 copy and paste > jQuery 사용 가능.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
+ API document : https://api.jquery.com/에서 찾아보기.
기본 문법
- $(선택자).행위;
$('#content').val()
- 이벤트
// 원래는...html코드 내에 클릭시 함수 실행하도록 설정해줬다.
<button id='click' onclick='hello();'>클릭</button>
<button id='click'>클릭</button>
<script>
function hello() {
console.log('hello');
}
// 제이쿼리 활용 > 버튼을 누르면 hello함수 실행 (이때는 함수의 이름만 전해줌)
$('#click').click(hello);
</script>
- 익명 함수 : 이름이 없는 함수..
함수를 한번만 사용하는 거라면 정의하고, 호출하는 과정이 비효율적... > 정의하지 않고 바로 사용할 수 있도록 하는 것.
>> $(선택자).행위(괄호 안에 function(){함수 정의});
<script>
// 익명함수
$('#click').click(function() {
console.log('hello');
});
</script>
- 콜백(callback)
어떤 함수에서 complete 인자를 주면 함수 실행이 모두 끝나고 난 뒤에 다음 함수를 실행하겠다는 의미
<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: '+=250'});
$('#spit').fadeOut(function() { // fadeOut이 된 후에 hp값을 감소시키도록
hp = hp-1;
$('#hp').text('HP : '+ hp);
});
$('#spit').css({left: '150px'});
});
</script>
</body>
</html>
<실습>
미니스타크래프트 만들기
더보기
<!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>
728x90
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 객체(Object)/Date 객체 (0) | 2023.12.11 |
|---|---|
| 자바 스크립트 런타임/ 비동기처리 (1) | 2023.10.19 |
