일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 집에서마늘빵
- 소풍
- 윈도우10 설치파일
- 디즈니 애니메이션
- 아이들과
- 간단한마늘빵
- 모아나
- 말티즈
- PHP
- 단맛이나는떡
- 애저 클라우드 서버
- 윈도우10
- MS Azure
- 육아정보
- 동물까페
- 에디트플러스
- 겨울왕국
- 달달한떡
- 애니메이션
- 디즈니
- 고화질 배경화면
- EditPlus
- mysql
- 감기
- 함께
- 터틀랜드
- 카스테라앙금인절미
- 앙금이들어있는떡
- Azure
- 퇴촌
- Today
- Total
RainStar Story
jQuery」jQuery를 사용하기 위한 min.js 다운로드, CDN 링크 본문
jQuery를 사용하기 위해선 jquery min.js 있어야 합니다.
min.js를 적용하는 방법은 파일을 서버에 업로드해서 사용하는 방법과 CDN링크를 통해 적용하는 방법이 있습니다.
두가지 방법에 따라 장/단점이 있으나, 굳이 거론하지는 않고 적용방법에 대해 설명하겠습니다.
jQuery .min.js 서버업로드 적용방법
jQuery 사이트를 방문하여 파일을 다운로드 받아야 합니다.
jQuery 다운로드 : https://jquery.com/download/
이곳에서는 항상 최신버전을 다운로드 할 수 있습니다. 여러가지 버전이 있는데 저는 맨 위에 있는 파일을 받았습니다.
다운받은 js 파일을 서버에 업로드 후 문서의 헤더에서 불러와 주면 바로 사용 가능합니다.
FTP를 이용해 다운받은 jquery min 파일을 서버에 업로드 합니다.
이제 페이지 작업시 <head> 에 스크립트를 링크로 불러와 주면 됩니다.
<script src="/js/jquery-3.2.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<!-- jquery min.js를 불러옵니다. -->
<script src="/js/jquery-3.2.1.min.js"></script>
<!-- jQuery 테스트 -->
<script type="text/javascript">
//$(document).ready(function(){}); 문서가 로드되면 안의 내용을 실행합니다.
$(document).ready(function(){
alert('jQuery 시작!'); //얼럿창을 띄웁니다.
$("span").text("jQuery를 시작합니다."); // <span></span> 태그안에 내용을 입력합니다.
});
</script>
</head>
<body>
<span></span>
</body>
</html>
FTP를 이용해 업로드하신 경로의 파일을 링크하시면 됩니다.
테스트페이지를 확인해보면 정상적으로 적용된 것을 확인할 수 있습니다.
jQuery CDN 링크 적용방법
파일을 업로드 해서 불러오는게 아니라 jQuery 사이트에 외부링크로 가져다가 사용하는 방법으로 아래 소스를 <head> 에 삽입하면 됩니다.
주의 할점은 버전명으로 입력시에는 최신버전과 동일한 이름이어야 하니 버전이 아닌 latest 를 꼭 입력하시기 바랍니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!DOCTYPE html> <html> <head> <!-- jquery min.js를 불러옵니다. --> <script src="/js/jquery-3.2.1.min.js"></script> <!-- jQuery 테스트 --> <script type="text/javascript"> //$(document).ready(function(){}); 문서가 로드되면 안의 내용을 실행합니다. $(document).ready(function(){ alert('jQuery 시작!'); //얼럿창을 띄웁니다. $("span").text("jQuery를 시작합니다."); // <span></span> 태그안에 내용을 입력합니다. }); </script> </head> <body> <span></span> </body> </html>
테스트결과 역시 정상적으로 작동됩니다.
개발환경에 따라 입맛에 맞게 선택하여 사용하시면 되겠습니다.
'Developer > javascript / jQuery' 카테고리의 다른 글
javascript」window.open() - 팝업창 속성 (0) | 2017.11.02 |
---|