728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- ์ ์ด์ฟผ๋ฆฌ ๋ฒํผ ์๋ -->
<p id="demo">p tag์ id๋ demo</p>
<button type="button" id="btnId">๋ฒํผ</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//๋ฒํผ์ ๊ทผ
/* $("button").click(function() {
alert("click");
}); */
//๋ฒํผ์ ID๋ก ์ ๊ทผ
/* $("#btnId").click(function(){
alert("btnId click");
}); */
//on์ ์ฌ์ฉํ ๋ฒํผ ํด๋ฆญ
/* $("#btnId").on("click", function(){
alert("btnId click");
}); */
//์ ์ด์ฟผ๋ฆฌ๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ํผํฉ ๋ฒํผ ํด๋ฆญ ๋ฐฉ๋ฒ
$("#btnId").on("click", btnClick);
});
function btnClick(){
alert("btnClick ํธ์ถ");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
์
๋ ฅ:<input type="text" id="text" value="">
<br>
<input type="button" id="btn" value="๋ฒํผ">
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
//alert("click");
//getter
var value = $("#text").val();
alert(value);
//setter
$("#text").val("hi hello");
});
});
</script>
<!-- this -->
<!-- ์๋ฐ์คํฌ๋ฆฝํธ์ผ๋ ํด๋ฆญ์ ๋ฐฐ๊ฒฝ์์ ๋ณ๊ฒฝ-->
<!-- <p onclick="func(0)">p tag 1</p>
<p onclick="func(1)">p tag 2</p>
<p onclick="func(2)">p tag 3</p>
<script type="text/javascript">
function func(n) {
let arrP = document.getElementsByTagName("p");
arrP[n].style.backgroundColor = "red";
}
</script> -->
<!-- ์ ์ด ์ฟผ๋ฆฌ ์ผ๋ -->
<p>p tag 1</p>
<p>p tag 2</p>
<p>p tag 3</p>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
//$(this).css("background","#0000ff"); //css(property๋ช
) 'getter', css(property๋ช
, ๊ฐ) 'setter'
//$(this).hide(); //ํด๋ฆญํ๋ฉด ์์ด์ง <--> show() ๋ณด์
});
//this๋ฅผ ์
๋ ฅํ๊ฒ ๋๋ฉด ํ์ฌ ๋๋ฅธ๊ฒ์ ๊ฐ์ ๊ฐ๊ณ ์จ๋ค.
});
</script>
</body>
</html>'๐ ์๋ฐ ์๋ฒ ํ์ด์ง JSP > ๐ช ์ ์ด ์ฟผ๋ฆฌ jQuery' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์ ์ด ์ฟผ๋ฆฌ - ์ด๊ธ ๋ฌธ์ /ํ์ด 1๏ธโฃ๐ (0) | 2021.03.08 |
|---|---|
| 5๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - List , Option + Oppend, Prepend ์ ์ฉ (0) | 2021.03.05 |
| 4๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - ๋ฒํผ + 2์ฐจ์ ๋ฐฐ์ด ์ด์ฉํ ํ ์ด๋ธ ์๋ ์์ฑ (0) | 2021.03.05 |
| 3๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - CSS, MouseOver, ์์ฑ ์ถ๊ฐ (0) | 2021.03.05 |
| 1๏ธโฃ ์ ์ด ์ฟผ๋ฆฌ - ๊ธฐ๋ณธ ๋ฌธ๋ฒ ํ์๊ณผ Getter, Setter (0) | 2021.03.05 |
๋๊ธ