Jquery(2) 기본 click,mouseover,mouserout
<!DOCTYPE html>
0<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>
<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");
});
$(document).ready(function () { //페이지가 로딩이 다 될 때 함수가 실행된다.
// alert("jquery");
$('#test').click(function () {
// alert("p tag demo click");
});
$("p").click(function () { //p 태그 클릭시 함수 실행
// alert("p tag click");
// alert( $("p").text() ); // p태그 안에 있는 전체 문자열을 취득
// alert( $(this).text() ); // 클릭한 p태그의 문자열만 취득
});
$("div p").click(function () {
// alert("div p tag click");
});
$("h1.cls1").mouseover(function () {
//h1 태그의 class 이름이 cls1 인 태그안에 mouseover 함수적용
$('#test').text("마우스 커서가 영역에 들어 왔음");
});
$("h1.cls1").mouseout(function () {
$('#test').text("마우스 커서가 영역에 벗어났음");
});
});
function _mOverFunc() {
$('#test').text("마우스 커서가 영역에 들어 왔음");
}
</script>
</body>
</html>