인프런 - 강의/슈퍼초보를 위한 웹개발 기초
11 - 제이쿼리(jquery)란?
----___<<<<<
2019. 12. 28. 06:17
제이쿼리는 자바스크립트 라이브러리입니다.
처음 보는 단어는 라이브러리라는 것이 있죠?
자바스크립트 도서관인가? 라는 생각을 할 수 있는데
누군가가 만들어놓은 자바스크립트들의 기능 모음이라고 생각하면 됩니다.
매번 비슷비슷한 기능을 구현하는데 시간을 쓰기 때문에, 라이브러리 라는 것을 사용해서 빠르고 편하게 기능을 구현할 수 있습니다.
자, 한번 봐 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#숨기기").click(function(){
$("div").hide();
});
$("#보이기").click(function(){
$("div").show();
});
});
</script>
</head>
<body>
<div>
왔다갔다
</div>
<button id="숨기기">숨기기</button>
<button id="보이기">보이기</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#moveButton").click(function(){
$("div").animate({left: '100px'});
});
});
</script>
<style type="text/css">
div {
width: 100px;
height: 100px;
position: absolute;
background-color: blue;
}
</style>
</head>
<body>
<button id="moveButton">움직이기 시작</button>
<div>
뿌우^^
</div>
</body>
</html>