JQuery 시작하기

HTML에 jQuery 코드 넣기

HTML에 jQuery 코드를 넣는 방법에는 두 가지가 존재한다.

• jQuery의 최신 버전을 삽입하기 위해 구글이 호스팅하는 CDN(content delivery network)를 사용하는 방법
• jQuery.com으로부터 다운로드 받아 직접 서버에 업로드 후 호스팅 하는 방법

우리는 서버에 업로드 후 사용하는 방법을 사용할 것이다.

 

서버에 업로드 후 사용하는 방법

https://jquery.com/ 에 접속하여 다운로드 버튼을 클릭한다.

jquery.com

 

아래의 그림에 표시된 것을 선택한다.

jquery.com의 다운로드 창

 

아래의 그림과 같이 뜬 내용을 복사하여 메모장에 jquery-3.5.1.min.js의 이름으로 붙여 넣기 한 후 저장한다.

선택했을 때의 창의 모습

 

프로젝트에 저장한 jQuery 삽입 코드

 

jQuery를 사용하기 위해 아래의 소스(jQuery 삽입코드)를 .html 파일에서 </head> 위에 삽입한다.

<script type="text/javascript" src="(경로)/jquery-3.5.1.min.js"></script>

 

jQuery도 자바스크립트 파일이다. 따라서 자바스크립트 삽입 위치를 </body> 바로 위에 넣기를 권장한다. 특수한 경우를 제외하고 DOM(Document Object Model)이 모두 로드되고 자바스크립트가 로드되어야 페이지가 빨리 열린다. 자바 스크립트가 여러 개일 경우 더 그렇다. 또 되도록이면 여러 개의 자바스크립트도 하나의 자바스크립트로 합쳐서 사용하면 페이지 향상에 도움이 된다.

 

cf. DOM(Document Object Model)

DOM(Document Obejct Model)은 웹페이지에 대한 인터페이스다. 기본적으로 여러 프로그램들이 페이지의 컨텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.