[Jquery] Jquery 기초

Jquery

Jquery는 자바스크립트의 DOM 객체 조작을 도와주는 라이브러리 입니다.

선택자부터 이벤트, 애니메이션 등 DOM 객체를 선택하거나 DOM 객체에 특정 이벤트를 만들고 애니메이션 효과를 추가할 때 유용합니다. 자바 스크립트만으로 작성하기 보다 편하죠.

 

예를 들어, 순수 자바스크립트로는 두 줄을 작성해야 box 객체를 조작할 수 있습니다.

//순수자바스크립트 선택자
const box = document.getElementById("box");
const box = document.querySelector("#box");

jquery로 작성해보겠습니다.

// jquery 선택자
const box = $("#box");

훨씬 간단하죠?

 

Jquery 장점

DOM 객체를 조작할 때 자바스크립트 네이티브보다 편하고 간단하고 짧아요.

Jquery로 구성된 라이브러리도 많아서 달력, 시계, 계산기 전부 다 자바스크립트 네이티브보다 훨씬 간편하게 구현할 수 있습니다.

Jquery 내장 함수에도 다양한 기능이 제공되어 애니메이션이나 효과 등을 간편하게 추가할 수 있습니다.

 

Jquery 사용 방법

script 태그에다가 jquery 파일을 링크로 src에 넣어주고, 그 후에 내장된 다양한 기능을 호출해서 쓰면 됩니다.

저는 3.7.0 버전을 선택했습니다. 아래 세가지 방법 중 하나를 사용하면 됩니다.

<script src="Jquery 파일 경로"></script>
<script src="js/jquery-3.7.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>