<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").on(
{
mouseenter:function() {
$(this).css("background-color", "lightgray");
},
mouseleave:function() {
$(this).css("background-color", "lightblue");
},
click:function() {
$(this).css("background-color", "yellow");
},
}
);
$("#btn1").click(
function() {
$("p").hide("slow");
}
);
$("#btn2").click(
function() {
$("p").show("slow");
}
);
});
</script>
</head>
<body>
<p>I love chicken.</p>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] Button을 사용한 text(), html(), val() Set (0) | 2020.08.12 |
|---|---|
| [제이쿼리] animation(), val(), attr() (0) | 2020.08.12 |
| [제이쿼리] ready(), focus(), blur() (0) | 2020.08.12 |
| [제이쿼리] setInterval() / clearIntetval() (0) | 2020.06.03 |
| [제이쿼리] 속성 조작 메소드 (0) | 2020.06.02 |
