EverGiver
jQuery 개발 환경 설정 본문
728x90
jQuery
- css 선택자를 사용하여 구동
(자바스크립트 라이브러리 파일) - 자바스크립트 요소 중 '자바스크립트 DOM' 부분을 좀 더 쉽게 사용할 수 있게 도와주는 라이브러리
jQuery 라이브러리 삽입
- CDN(Content Delivery Network)에 올려져 있는 jQuery 파일을 이용
- CDN
: 콘텐츠를 여러 서버에 분산 배치해서 콘텐츠를 전송하는 과정에서 발생하는 트래픽 집중 & 병목 현상 및 데이터 손실을 해결하기 위한 기술
- 대표 CDN
▷구글 Ajax API CDN https://developers.google.com/speed/libraries#jquery
▷ 마이크로소프트 CDN https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js
▷ jQuery CDN(via Media Template) https://code.jquery.com/jquery-3.6.0.js - 파일을 다운로드해 이용하는 방법
- jQuery 홈페이지에서 최신 파일을 내려받아 링크를 웹 페이지에 삽입
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>라이브러리</title> </head> <body> <script src="js/jquery-3.6.0.js"></script> </body> </html>
ready() 메서드 설정
ready( ) 메서드는 문서의 노드를 사용할 준비가 되면 Document 객체에서 발생하는 DOMContent Loaded 이벤트 처리를 포장한 메서드이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 사용 준비!</title>
<style>
body {
font-size: 9pt;
font-family: "굴림";
}
</style>
<!-- 구글 CDN 사용
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> -->
<script src="../../libs/jquery-1.11.0.min.js"></script>
<script>
/*
예제 02: ready() 메서드 사용법 4가지
jQuery에서 ready()를 이용해서 진입점을 설정하는 방법은 다음과 같이 4가지 방법이 있습니다.
*/
// 방법1
jQuery(document).ready(function(){
alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});
// 방법2
// 방법1을 간소화
jQuery(function(){
alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});
// 방법3
// 방법1에서 jQuery함수 대신 $함수로 변경
$(document).ready(function(){
alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});
// 방법4
// 방법3을 간소화
$(function(){
alert("안녕하세요. jQuery에 온 걸 환영합니다.");
});
</script>
</head>
<body>
<div>
jQuery를 사용할 준비가 됐나요?
</div>
</body>
</html>
$()의 의미
$인 함수 그 자체이다.
- $()는 $함수를 호출하는 것이다.
window.jQuery = window.$ = jQuery;
728x90
'Front-End (웹)/jQuery' Related Articles
more
Comments