<!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>
<style type="text/css">
p {
background-color: red;
}
h1 {
background-color: blue;
}
</style>
</head>
<body>
<!--
클릭하면 이미지 변경
mouseover시 애니메이션 효과주기
동적으로 변경
-->
<p id="test">p tag id test</p>
<p>p tag 1</p>
<p>p tag 2</p>
<div>
<p>div 안의 p tag</p>
</div>
<h1 class="cls" onmouseover="_mOverFunc()">h1 class cls</h1>
<h1 class="cls1">h1 class cls1</h1>
<script type="text/javascript">
// 간단한 방법
$(function() {
// alert("jquery");
});
// 정석으로 jQuery 준비
$(document).ready(function() {
// alert("jquery");
$('#test').click(function() {
// alert("p tag demo click");
});
$("p").click(function() {
// alert("p tag click");
// alert( $("p").text() ); // p태그 안에 있는 전체 문자열을 취득
// alert( $(this).text() ); // 클릭한 p태그의 문자열만 취득
});
// div안의 p태그 클릭시
$("div p").click(function() {
// alert("div p tag click");
});
// mouseover시 알람
$("h1.cls1").mouseover(function() {
$('#test').text("마우스 커서가 영역에 들어 왔음");
});
$("h1.cls1").mouseout(function() {
$('#test').text("마우스 커서가 영역에 벗어났음");
});
});
function _mOverFunc() {
$('#test').text("마우스 커서가 영역에 들어 왔음");
}
</script>
</body>
</html>
