5/13/2018

제이쿼리(JQuery) 사용하기

제이쿼리(JQury)란 오픈소스 자바스크립트 라이브러리중 하나입니다. CSS 선택자를 활용하여 간단하게 HTML요소에 접근할 수 있으며 다양한 기능이 내장되어있습니다.

바닐라JS(순수한 자바스크립트)보다 코드가 짧아지고, 다양한 기능을 간단히 구현할 수 있어서 많이 사용됩니다.

제이쿼리 홈페이지에 접속합니다.

오른쪽에 다운로드 버튼을 클릭합니다.

일반 제이쿼리(압축/비압축 버전, 맵파일)와 에이젝스(Ajax)와 효과(Effects) 모듈이 없는 슬림타입의 제이쿼리(압축/비압축 버전, 맵파일)을 다운받을 수 있습니다.

HTML에 라이브러리를 추가하는 방법은 헤드 <head> ~ </head> 내부에 CDN코드를 추가하면 됩니다.

<!-- 제이쿼리 홈페이지 -->
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

<!-- 구글 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 다운받은 제이쿼리 -->
<scirpt src="E:\work\jquery\3.3.1\jquery.min.js"></scirpt>

제이쿼리 홈페이지나 구글 API 사이트, 또는 다른 사이트에 업로드된 제이쿼리 파일 주소를 가져와서 사용하는 방법과 사용자의 PC에 저장된 파일 경로를 가져와서 사용하는 방법이 있습니다.

인터넷에 항상 접속할 수 있는 환경이라면 업로드된 파일을 가져오는 방법이 유용하고, 특정 버전으로 개발하는 경우 파일을 다운로드 받아서 사용하다가 개발이 완료되면 서버에 사용하던 제이쿼리 파일을 같이 업로드하여 사용하면 됩니다.

이때 다른곳에 업로드된 제이쿼리의 주소를 가져와 이용하는 경우 그 제이쿼리 주소가 바뀌거나 없어지는 등, 항상 존재하리란 보장이 없기 때문에 확실히 유지가 될 수 있는 사이트나(제이쿼리 사이트, 구글 등) 개인 서버에 업로드된 파일을 사용하는것을 추천합니다.

구글 API 사이트에 업로드된 제이쿼리가 잘 작동되는지 간단한 스크립트를 추가했습니다.

<p> 태그의 글씨색상을 파랑색으로 변경하고(color:#05f), 두번째 <p> 태그의 내용으로된 경고창을 띄우는 스크립트입니다.

잘 작동됩니다.

게시물 수정