jQuery 연결 방법

📖 jQuery를 사용하기 위해서는 jQuery 라이브러리를 웹페이지에 연결해서 사용해야 함

jQuery 라이브러리 연결 방식

(i) 파일을 직접 다운받아 연결

(ii) CDN(Content Delivery Network) 방식

1. Download 방식

① jQuery 라이브러리 다운로드

https://jquery.com/download 에 접속 → Download the uncompressed development version of jQuery 3.7.1 다운
jQuery 폴더에 저장 'jquery-3.7.1.js'

② HTML 문서에서 jQuery 라이브러리 연결

html 문서를 jQuery 라이브러리와 같은 경로에 저장
<head> ~ </head>에 <script src=" jquery-3.7.1.js"></script> 입력
라이브러리가 잘 연결되었는지 확인하기 위해 '$(document).ready()'를 사용

2. CDN 방식

① CDN 카피하기

https://releases.jquery.com 에 접속 → jQuery Core 3.7.1: uncompressed 버전을 선택
CDN을 복사

② HTML 문서에서 jQuery 라이브러리 연결

<head> ~ </head>에 CDN 붙여넣기

3. jQuery Migrate Plugin

라이브러리의 버전 차이 때문에 발생되는 문제를 해결하기 위해 jQuery Migrate Plugin을 제공

① jQuery Migrate Plugin 다운로드

https://jquery.com/download 에 접속 → Download jQuery Migrate 3.4.0 (compressed production version) 버전을 선택
우클릭 → 다른이름으로 링크저장

② HTML 문서에서 jQuery Migrate Plugin 연결

<head> ~ </head>에 <script src=" jquery-3.7.1.js"></script> & <script src="jquery-migrate-3.4.0.min.js"></script>입력

4. jQuery 기본 형식

$(document).ready() 로 시작
ready() : jQuery 이벤트. 자바스크립트's load 이벤트와 유사한 기능
$(document).ready() 를 짧게 표현할 수 있음

=====jQuery 기본 형식=====
<head>
	<script>
    	$(document).ready(function() {
        	실행문;
        });
    </script>
</head>

=====$(document).ready() 짧게 표현하기=====
<head>
	<script>
    	$(function() {
        	실행문;
        });
    </script>
</head>

출처 : ⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦

즐기는 코딩 [즐:코]

jQuery 연결 방법

티스토리툴바