jQeury 개요
- jQuery는 빠르고 간결한 JavaScript Library 이다.
- HTML document traversing(탐색), 이벤트 처리, 애니메이션, AJAX를 단순화하여 빠른 웹 개발을 가능하게 한다.
- 다양한 브라우저 지원
- 경량 파일(90kb 수준의 파일크기)
- CSS3 규격 지원
- 존 레식에 의해 개발
jQuery를 사용하기 위한 라이브러리 포함
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
CDN(Content Delivery Network)을 이용 jQuery 라이브러리 포함
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
core 예제
더보기
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// DOM이 로드 될 때 실행
/*
// 이벤트 핸들러 프로퍼티 방식
// 테스트-2 만 실행
window.onload = function() {
console.log("테스트-1");
};
window.onload = function() {
console.log("테스트-2");
};
*/
/*
// addEventListener
// 둘 다 실행
window.addEventListener("load", function() {
console.log("테스트-1");
});
window.addEventListener("load", function() {
console.log("테스트-2");
});
*/
/*
// jquery를 이용한 실행
// 둘 다 실행
jQuery(document).ready(function() {
console.log("테스트-1")
});
jQuery(document).ready(function() {
console.log("테스트-2")
});
*/
/*
// jQuery(document).ready(function(){}); 의 짧은 표현
jQuery(function(){
console.log("테스트-1");
});
jQuery(function(){
console.log("테스트-2");
});
*/
/*
// jQuery === $
$(function(){
console.log("테스트-1");
});
$(function(){
console.log("테스트-2");
});
*/
/*
$(document).ready(function() {
// DOM 객체만 로드 되면 바로 실행
console.log("테스트-1");
});
$(window).on("load", function() {
// 해당 페이지의 모든 외부 리소스(이미지, css 등)가 로드 된 후 실행
// $(function(){}); 보다 느림
console.log("테스트-2");
})
*/
$(function() {
$(document.body).css("background", "#eee");
});
</script>
</head>
<body>
<h3> jQuery Core 예제</h3>
<p>
jQuery( elements ), $( elements )
</p>
<p>
$() = $(document).ready() = jQuery() = jQuery(document).ready()
</p>
</body>
</html>
'쌍용강북교육센터 > 10월' 카테고리의 다른 글
| 1028_jQuery : append, prepend, before, after, wrap, clone, (0) | 2021.10.28 |
|---|---|
| 1027_jQuery : 선택자 Selectors (0) | 2021.10.28 |
| 1022_JSP/Servlet : 파일처리 (0) | 2021.10.25 |
| 1021_JSP/Servlet : 세션 Session (0) | 2021.10.25 |
| 1021_JSP/Servlet : 쿠키 Cookie (0) | 2021.10.25 |