<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
이름: <input type="text"><br><br> 이메일: <input type="text"><br><br>
<p> 여기가 p tag 1 입니다</p>
<p> 여기가 p tag 2 입니다</p>
<br>
<script>
$(document).ready(function() {
$("input").focus(
function() {
$(this).css("background-color", "#ffff00");
}
);
$("input").blur(function() {
$(this).css("background-color", "#fff");
});
});
$("p").mouseover(function() {
$(this).css("background-color", "#ff0000");
})
$("p").mouseout(function() {
$(this).css("background-color", "#fff");
})
//더블 클릭
$("p").dblclick(
function() {
alert($(this).html());
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div align="center">
<div class="test" style="background-color: #00ff00; width: 50%; height: 100px; text-align: center;">
I can do it
</div>
</div>
<br>
<button id="hideBtn">감추기</button>
<button id="showBtn">보여주기</button>
<button id="toggleBtn">스위치</button>
<script>
$(function() {
//수치를 집어넣으면 해당 시간만큼 애니메이션 구현되어 나온다
$("#hideBtn").click(function() {
$(".test").hide(2000);
});
$("#showBtn").click(function() {
$(".test").show(3000);
});
$("#toggleBtn").click(function() {
$(".test").toggle(1500);
});
});
/*$('.test').mouseenter(function() {
$(this).css("background-color", "#0000ff");
});
$('.test').mouseleave(function() {
$(this).css("background-color", "#00ff00");
}); */
//첫번째 함수 : mouseenter 두번째 함수: mouseleave
$(".test").hover(function() {
$(this).css("background-color", "#0000ff");
}, function() {
$(this).css("background-color", "#00ff00");
});
</script>
</body>
</html>
