<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Name:
<input type="text" name="firstname">
<br>
<br> Email:
<input type="text" name="email">
<br>
<br>
<br>
<p>p Tag</p>
<button id="hideBtn">감추기</button>
<button id="showBtn">보여주기</button>
<br>
<!-- 감췄다가 보여주는 토글 -->
<button id="toggleBtn">toggle</button>
<script type="text/javascript">
$(function() {
$("input").focus(function() {
// focus오면 (key값, value)
$(this).css("background-color", "#ffff00");
});
$("input").blur(function() {
$(this).css("background-color", "#ffffff");
});
$("#hideBtn").click(function() {
$('p').hide(1000);
});
$("#showBtn").click(function() {
$('p').show(3000);
});
$("#toggleBtn").click(function() {
$('p').toggle(2000);
});
/*
p태그 클릭 시 사라짐
$("p").click(function () {
$(this).hide();
});
*/
// p태그 더블 클릭하면 사라짐
$("p").dblclick(function() {
$(this).hide();
});
});
</script>
<br>
<br>
<div align="center">
<div id="test"
style="background-color: red; width: 50%; height: 100px; text-align: center;">
여기가 div tag입니다</div>
</div>
<script type="text/javascript">
$(function() {
/*
$("#test").mouseenter(function() {
alert("div영역에 들어옴");
});
$("#test").mouseleave(function() {
alert("div영역을 벗어남");
});
*/
// 영역에 들어오고 나가는 것 한번에
$("#test").hover(function() {
alert("hover 동작");
});
/*
$("#test").mousedown(function() {
alert("div 클릭");
});
$("#test").mouseup(function() {
alert("div 놓음");
});
*/
});
</script>
</body>
</html>
jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시...