▷ JQuery
→ 자바스크립트의 라이브러리 중 하나
→ 자바스크립트의 이벤트 등의 조작을 쉽게 할 수 있도록 여러 메서드 등을 제공
→ AJAX 기술에 많이 활용됨
→ JQuery 사용을 위해 현재 문서 내에 JQuery 라이브러리 등록 필요(= 외부 자바스크립트 파일 등록과 동일)
▷ JQuery 사용 방법 - 시작
1. Load 이벤트(잘 사용하지 않음)
→ 화면에 필요한 모든 요소(HTML, CSS, JS, Image 등)가 메모리에 로딩 완료되면 실행
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(window).load(function() {
alert("Load 이벤트 실행!")
});
</script>
</head>
<body>
<h1>JQuery - test1.jsp</h1>
</body>
</html>
2. Ready 이벤트
→ Load 이벤트와 달리 DOM TREE 생성 직후 실행되는 이벤트(리소스와 무관함)
=> 이미지 등의 요소는 로딩되기 전!
→ Load 이벤트보다 빠르며, 중복 선언이 가능하고, 선언된 순서에 따라 차례대로 실행됨
→ 세 가지 방법 중 하나의 방법을 통해 이벤트 처리
1) jQuery(document).ready(함수) → 잘 사용하지 않음
2) $(document).ready(함수) → 잘 사용함(jQuery 객체명을 $ 기호로 대체(축약))
3) $(함수) → 잘 사용함(document 객체의 ready 이벤트를 모두 생략)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){ // 1번
alert("Ready 이벤트 1번 방법");
});
$(document).ready(function() { // 2번
alert("Ready 이벤트 2번 방법");
});
$(function() { // 3번
alert("Ready 이벤트 3번 방법");
// 다른 자바스크립트 함수 호출도 가능
print();
});
function print(){
alert("Ready 이벤트 3번 방법(다른 함수에서 수행됨)");
}
</script>
</head>
<body>
<h1>JQuery - test1.jsp</h1>
</body>
</html>
'JSP' 카테고리의 다른 글
| Jquery (css()함수) (0) | 2022.03.04 |
|---|---|
| JQuery (선택자) (0) | 2022.03.04 |
| MVC 모델 (6) - 최근 공지사항 메인페이지에 출력 (0) | 2022.03.01 |
| MVC 모델 (5) (0) | 2022.02.24 |
| MVC 모델 (4) (0) | 2022.02.24 |
