반응형
<!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>
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| 제이쿼리 기본 태그 조작법 (0) | 2020.01.13 |
|---|---|
| 제이쿼리 , JSP 간 연동1 (0) | 2020.01.13 |
| 제이쿼리 테이블에 값 넣기 (0) | 2020.01.13 |
| 제이쿼리 기초 2 (0) | 2020.01.10 |
| 제이쿼리 기초1 (0) | 2020.01.10 |
