제이쿼리 사용방법
제이쿼리를 사용하기 위해서는 자바스크립트 라이브러리 파일이 필요합니다. 제이쿼리 버전은 1.x, 2.x,3.x버전이 있습니다. 1.x 버전은 익스플로러 IE6, IE7, IE8 버전을 지원합니다.
제이쿼리 다운로드
연동후에는 페이지소스 보기하여 제대로 연동이 되었는지 확인해야합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- script 연동 -->
<script src="jquery.min_1.12.4.js"></script>
<script>
</script>
</body>
</html>
CDN 사용하기
CDN(Content Distribution Network)는 전세계적으로 분산되어 있는 서버 네트워크를 사용하는 시스템입니다. 콘텐츠를 효율족으로 사용하기 위한 네트워크 시스템입니다.
<!-- 3.x snippet: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 2.x snippet: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- 1.x snippet: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
제이쿼리 준비
JQuery(document).ready(function(){
//실행코드
});
JQuery를 $로 치환하여 사용할 수 있습니다.
$(document).ready(function)(){
//실행코드
});
$(function(){
//실행코드
});
window.onload = function(){
//실행코드
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- script -->
<script src="jquery.min_1.12.4.js"></script>
<script>
$(document).ready(function(){
//실행코드
$("h1").css("background","red");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제이쿼리</h1>
<!-- script -->
<script src="jquery.min_1.12.4.js"></script>
<script>
//실행코드
$("h1").css("background","red");
</script>
</body>
</html>
제이쿼리를 head에 사용할때는 $(document).ready(function(){}); 이 생략 불가능하고
body에 사용할때는 생략이 가능합니다.(인터프린터 언어이기 때문.)