프로그래밍/Javascript

jQuery 라이브러리 설정

jquery 라이브러리를 사용할 수 있는 설정 방법을 알아보겠습니다.


기본 예제 11-1 jQuery 라이브러리 설정


1. jQuery 웹 사이트 접속하기 사용할 jQuery 라이브러리를 구해야 합니다. jQuery 라이브러리는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 파일을 다운로드해 외부 자바스크립트 파일로 추가하는 방법입니다. http://jquery.com에 접속하면 메인 페이지에서 곧바로 jQuery 라이브러리를 다운로드 할 수 있습니다.



두 번째는 CDN 호스트를 사용하는 방법입니다. CDN(Content Delivery Network)은 파일을 여러 서버에 분산시키고 사용자가 접속하는 지역과 가장 가까운 곳의 서버에서 파일을 전송하는 기술입니다. CDN을 사용하면 트래픽이 특정 서버에 집중되지 않고 각각의 지역 서버에 분산됩니다.


http;s://code.jquery.com/에 들어가면 jQuery 파일들이 있습니다. 원하는 파일(이 내요엥서는 uncompressed 버전을 사용합니다)의 링크에서 마우스 오른쪽 버튼을 클릭하고, 링크 주소를 복사해서 사용합니다.


NOTE_ 구 버전의 인터넷 익스플로러를 지원하려면 1.x 버전 사용


jQuery 3.x 버전은 구 버전의 인터넷 익스플로러(8 이하)에서 동작하지 않습니다. 구 버전의 인터넷 익스플로러에서 동작하려면 jQuery 1.x 버전을 사용해야 합니다. 이 둘의 차이는 최신 기능 지원(터치 이벤트 등)과 용량입니다. 범용적인 기능은 두 가지 모두 동일하게 사용할 수 있습니다. 용량은 3.x 버전이 훨씬 적습니다. 최신 웹 브라우저는 document.querySelector() 메소드 등의 선택자로 문서 객체를 선택하는 기능이 있지만 구 버전의 웹 브라우저에는 이러한 기능이 없어 이것을 다로 구현하기 위해 많은 코드를 사용했기 때문입니다. 


2. jQuery 사용하도록 기본 설정하기


CDN은 jQuery를 비롯해 구글, 마이크로소프트 등에서도 제공합니다. 원하는 회사의 링크를 복사해서 다음 코드처럼 HTML 페이지를 작성합니다. 이 내용에서는 jQuery 웹 사이트에서 기본으로 제공하는 CDN을 사용합니다.


[코드 11-1] jQuery 기본 설정


<!DOCTYPE html>

<html>

<head>

<title>jQuery Basic</title>

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script>$(document).ready(function () {


};

</script>

</head>

<body>

</body>

</html>


이렇게 웹 페이지를 구성하면 jQuery 라이브러리를 사용할 준비가 모두 끝납니다. 두 번째 script 태그에 있는 $(document).ready() 코드는 window.onload 이벤트와 같은 기능을 수행합니다. 자세한 설명은 이벤트 부분에서 다룹니다.



'프로그래밍 > Javascript' 카테고리의 다른 글

jQuery 문서 객체 조작  (0) 2017.08.14
jQuery 문서 객체 선택  (0) 2017.08.14
문서 객체 모델 - 이벤트  (0) 2017.08.11
문서 객체 모델  (0) 2017.08.09
자바스크립트 - 객체  (0) 2017.08.08
TAGS.

Comments