[jQuery] 2.jQuery 적용

in Web on jQuery


.js 파일 로드



저번 장에서 제이쿼리 파일을 다운로드까지 받았는데요!

이번 장에서는 .js 파일을 로드해보는 방법에 대해 알아보겠습니다.

웹 페이지에 제이쿼리 파일을 로드하는 방법은 다음과 같습니다.


  • 제이쿼리 파일을 다운받아 로드하는 방법



  • CDN(Content Delivery Network)를 이용하여 로드하는 방법





제이쿼리 파일을 다운받아 로드하는 방법



다운 받은 jquery-3.3.1.js 파일을 로드하는 방법은 다음과 같습니다. 


<head>
	<script src="/파일경로/제이쿼리파일명.js"></script>
</head>



CDN을 이용하여 로드하는 방법



CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때,

자동으로 가장 가까운 서버에서 다운받도록 하는 기술입니다.

이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있습니다.

이러한 CDN을 이용하면 제이쿼리 파일을 서버에 따로 저장하지 않아도 제이쿼리를 사용할 수 있습니다. 


<!-- jQuery.com CDN -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

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

<!-- MS CDN -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

<!-- CDNJS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--  jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>




예를 들어 파일을 따로 다운받을 필요없이 다음과 같이 추가하면 됩니다. 


<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>