[jQuery] 다운로드및 사용
jQuery는 일관되며 좀 더 쉬운 방식으로 다양한 웹브라우저에서 HTML 문서를 다루고자 만들어진 프레임워크입니다. Javascript를 그대로 사용하는 것보다는 jQuery를 사용하는 것이 본래 Javascript를 통해 이루고자 하는 목표에 접근하기 훨씬 쉬운 방법입니다. 다만 근래에는 jQuery를 대체할 수 있는 많은 프레임워크가 등장하고, jQuery에 관한 여러 이슈들이 부각되면서 jQuery를 배제하고자 하는 움직임도 있습니다.
jQuery를 사용하려면 아래 사이트에 접속합니다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
위 사이트를 방문한 후 상단에 Download를 눌러줍니다.
직접 내려받아 사용하는 것과 CDN을 통해 사용하는 방법 등 다양한 내용들이 나와 있는데 어떤 것이든 원하는 방향으로 진행하면 됩니다.
20년 5월 현재 시점에 최신버전은 3.5.1이며 직접 내려받아 사용하는 경우 compressed 버전과 uncompressed 버전 2가지 중 하나를 선택할 수 있습니다. 굳이 jQuery의 소스코드를 보거나 수정해야 하는 경우가 없다면 좀 더 용량이 낮은 compressed 버전을 내려받아 사용하는 것이 좋으며 ajax와 각종 효과 기능이 제거된 slim버전도 있으니 관련 기능이 필요 없다면 slim버전도 괜찮습니다.
CDN을 통해 jQuery를 사용하기로 했다면 안내된 내용대로
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
code.jquery.com
사이트를 방문하면 됩니다. 그외 Google이나 Microsoft 등도 jQuery의 CDN 서비스를 제공하니 참고하시기 바랍니다.
CDN의 경우 각각 1.x와 2.x, 3.x 버전대를 제공하고 있습니다. 인터넷 익스플로러 8 버전 이하를 고려하지 않아도 된다면 3.x버전 사용을 권장합니다.
원하는 버전을 클릭하면
위와 같이 사용가능한 주소가 나오는데 저 주소를 그대로 다음과 같이 사용하면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
</script>
</head>
<body>
</body>
</html>참고로 상기주소에서 사용된 integrity나 crossorigin을 SRI 해시(Subresource Integrity Hash)라고 하며 code.jquery.com/jquery-3.5.1.js에 접속하여 스크립트를 가져올 때 정말 jquery.com에서 가져오는 스크립트인지를 확인하게 되므로 좀 더 안전하게 스크립트를 이용할 수 있도록 합니다.
로컬에서 시험삼아 공부해 보거나 자체 서버를 운영하는 경우 되도록이면 직접 내려받아 사용하는 것을 권장합니다. 이를 위해 Download 링크를 클릭하면
위와 같은 화면을 볼 수 있는데 위 내용을 그대로 복사해. js 파일을 만들어 붙여 넣습니다. 그리고 파일을 적당한 위치에 놓은 다음다음과 같이 정확한 jQuery파일의 위치를 지정해 주면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="/scrips/jquery-3.5.1.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>문서가 웹 브라우저에 완전히 로드되었을 때의 이벤트를 javascript에서는
window.onload = function() {
alert('완료');
};이와 같이 했다면 jQuery에서는 다음과 같이 할 수 있습니다.
$(document).ready(function() {
alert('완료');
});
//혹은
$(function () {
alert('완료');
});이때 $표시는 jQuery를 의미합니다. jQuery내부에서
window.jQuery = window.$ = jQuery;위와 같이 처리하고 있으므로 jQuery를 사용할 때 $와 jQuery는 동일하게 취급됩니다.
jQuery(function () {
alert('완료');
});만약 다른 문자를 사용하고 싶다면 다음과 같이 할 수도 있으며
var j = jQuery;
j(function () {
alert('완료');
});특히 명시적으로 $ 문자를 더이상 사용하지 않음을 강제하고자 한다면 극단적으로 다음과 같이 할 수도 있습니다.
$.noConflict();
var j = jQuery;
j(function () {
alert('완료');
});예제에서 사용된 noConflict() 메서드는 jQuery의 식별자로 $ 문자를 더이상 사용할 수 없도록 합니다.
이제 jQuery를 사용할 준비가 끝났습니다.