jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기

CDN 이용하기

HTML 문서에 다음 코드를 추가합니다.

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다.

다운로드 받아 연결하기

jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다.

<script src="path/jquery-3.3.1.min.js"></script>

path와 파일 이름은 적절히 변경합니다.

jQuery 사용하기

다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
	</head>
	<body>
		<h1 id="jb">Lorem Ipsum Dolor</h1>
		<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
		<script>
			$( '#jb' ).css( 'color', 'red' );
		</script>
	</body>
</html>

만약 jQuery 코드를 위로 올리고 싶다면 다음과 같이 합니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
		<script>
			$( document ).ready( function() {
				$( '#jb' ).css( 'color', 'red' );
			} );
		</script>
	</head>
	<body>
		<h1 id="jb">Lorem Ipsum Dolor</h1>
	</body>
</html>

jQuery 강좌