제이쿼리는 자바스크립트 라이브러리입니다.
처음 보는 단어는 라이브러리라는 것이 있죠?
자바스크립트 도서관인가? 라는 생각을 할 수 있는데
누군가가 만들어놓은 자바스크립트들의 기능 모음이라고 생각하면 됩니다.
매번 비슷비슷한 기능을 구현하는데 시간을 쓰기 때문에, 라이브러리 라는 것을 사용해서 빠르고 편하게 기능을 구현할 수 있습니다.
자, 한번 봐 보겠습니다.
<!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>
'인프런 - 강의 > 슈퍼초보를 위한 웹개발 기초' 카테고리의 다른 글
| 13 - 내 소개 페이지 만들기 - 1 (0) | 2019.12.28 |
|---|---|
| 12 - 제이쿼리 연습 (0) | 2019.12.28 |
| 10 - 자바스크립트 연습 조금 더 해보기(디버깅) (0) | 2019.12.28 |
| 9 - 자바스크립스 연습 (0) | 2019.12.28 |
| 8 - 자바스크립트(Javascript) 맛보기 (0) | 2019.12.28 |