728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220425/event1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 예제</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//on : 이벤트 등록, click 이벤트. h1태그를 클릭한 경우
$("h1").on("click", function() {
// $(this) : 클릭된 h1태그. 이벤트가 발생된 h1태그
// html() : 클릭된 h1태그의 내부 html 내용
$(this).html(function(i, item) {
//item : 클릭된 h1태그의 내용.
return item + "+"
})
})
$("h1").on({
//mouseenter : 마우스 커서가 영역내부로 들어오는 경우
mouseenter : function() {
//$(this) : 마우스 커서가 들어온 h1 태그
//addClass() : class 속성 추가
$(this).addClass("reverse")
},
//mouseleave : 마우스 커서가 영역내부에서 나가는 경우
mouseleave : function() {
//$(this) : 마우스 커서가 나간 h1 태그
//addClass() : class 속성 제거
$(this).removeClass("reverse")
}
})
})
</script>
<style type="text/css">
.reverse {
background : black;
color : white;
}
</style>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery event3 (setInterval) (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery event2 (click, hover) (0) | 2022.04.25 |
| [Jquery] 21. Jquery attr 함수 (0) | 2022.04.25 |
| [Jquery] 21. Jquery css 함수 (0) | 2022.04.25 |
| [Jquery] 21. Jquery each 함수(let arr=, $.each) (0) | 2022.04.22 |