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>