대덕인재개발원/대덕인재개발원_Front End
230912_jQuery 강의
Unlimited00
2023. 9. 12. 12:11
[jQueryTest1.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리01" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리01" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리01</title>
<link href="css/style14.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script>
const proc1 = () => {
// javascript 코드
// var res1 = document.getElementById("result1");
// res1 은 dom 변수이다.
// res1.style.backgroundColor = "red";
// jQuery 코드
// $("#result1").css("background-color", "blue");
// res1는 제이쿼리 변수이다.
var res1 = $("#result1");
res1.css({
backgroundColor : "blue",
padding : "100px"
});
}
</script>
</head>
<body>
<hr color="red" />
<h1>
result1 검색해서 배경색 바꾸기
</h1>
<br />
<input type="button" value="추가" onclick="proc1();" />
<br />
<div id="result1"></div>
<hr color="red" />
</body>
</html>
[jQueryTest2.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리02" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리02" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리02</title>
<link href="css/style14.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script>
// result1 검색
// window.onload = function(){
// var res11 = document.getElementById("result1");
// res11.style.backgroundColor = "yellow";
// res11.style.padding = "50px";
// }
$(document).ready(function(){
var res1 = $("#result1");
res1.css({
backgroundColor : "red",
padding : "100px"
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
result1 검색해서 배경색 바꾸기
</h1>
<br />
<input type="button" value="추가" onclick="proc1();" />
<br />
<div id="result1"></div>
<hr color="red" />
</body>
</html>
[jQueryTest3.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리03" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리03" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리03</title>
<link href="css/style14.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script>
const proc1 = () => {
$("#result1").css({
backgroundColor : "yellow",
padding : "50px"
});
}
$(document).ready(function(){
var btn1 = $("#btn2");
btn1.click(function(){
$("#result2").css({
backgroundColor : "magenta",
padding : "100px",
border : "50px solid green"
});
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
result1 검색해서 배경색 바꾸기
<br />
javascript 방식의 onclick 이벤트
</h1>
<br />
<input type="button" value="추가" onclick="proc1();" />
<br />
<div id="result1"></div>
<hr color="red" />
<h1>
result2 검색해서 배경색 바꾸기
<br />
jQuery 방식의 onclick 이벤트
</h1>
<br />
<input id="btn2" type="button" value="추가" />
<br />
<div id="result2"></div>
<hr color="red" />
</body>
</html>