Overview
- Javascript는 document. .... 머시기 이렇게 써야된다.
- 더럽고 너무 길다 ! 라고 생각해서 HTML 조작 문법을 쉽게 바꿔주는 라이브러리들이 생겨나게된다.
- 라이브러리들은 jQuery, React, Vue 등이 있다.
- jQuery 사용 시 코드가 줄어든다.
- jquery cdn 검색 후 복붙하면 설치된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>- 라이브러리 설치와 같은 코드는 body tag 마지막에 넣어주는게 관습이다.
- page loading 속도 이슈 때문
Java Script와 비교
<p class="hello">안녕</p>
<script>
document.querySelector(".hello").innerHTML = "바보";
</script> <p class="hello">안녕</p>
<!-- <script>
document.querySelector(".hello").innerHTML = "바보";
</script> -->
<script>
$(".hello").html("바보");
</script>- 그냥 짧게 쓸 수 있어서 쓰는거다.
- 그런데 cdn 호출 후 아래에 적어야되서 header에 정의해야 작동했다.
<script>
$(".hello").html("바보");
$(".hello").css('color', 'red');
</script>
- 이런 식으로 css도 조작할 수 있었다.
- 기존 Nav bar 주제에서 사용할 수 있던 점은 addClass(), toggleClass() 이런 함수들이 있다.
- class 탈부착 코드도 간단해 진다는 것이다.
- 쌩 js 문법으로 사용하면 동일 클래스의 여러 요소들을 바꿀 때, 하나씩 접근해서 제어해줘야되는데, jQuery를 사용하면 한번에 바뀐다.
$('.hello').html('바보');- 이걸 쓰면 hello class의 모든 요소들에 적용된다.
- 보통 쌩 js 문법으로는 document.querySelectAll('.hello')[*].innerHTML = * 이런식으로 개수대로 인덱싱해서 써줘야된다. -> jquery를 한줄이면 끝나는 것이다.
- jQuery의 addEventListener()
$("#test").on("click", callback())-
on 이다. 그냥 개짧다.
-
jQuery사용 시 hide, slideup() 등등 멋진 애니메이션을 간단한 코드로 처리가 가능해진다.
OnePunchLotto