728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220425/event2.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(){
//click() : 클릭된 경우 호출되는 기능
$("h1").click(function() {
$(this).html(function(i, item) {
return item + "+"
})
//off : 클릭된 h1태그의 클릭 이벤트 취소
$(this).off()
})
//hover(function(){}, function(){}) : 마우스 커서가 영역내부로 들어오는 경우 호출되는 함수
$("h1").hover(function(){ //mouseenter 이벤트 발생시 처리
$(this).addClass("reverse")
},function() { //mouseleave 이벤트 발생시 처리
$(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 event4 (stopPropagation, preventDefault) (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery event3 (setInterval) (0) | 2022.04.25 |
| [Jquery] 21. Jquery event1 (on, mouseenter, mouseleave) (0) | 2022.04.25 |
| [Jquery] 21. Jquery attr 함수 (0) | 2022.04.25 |
| [Jquery] 21. Jquery css 함수 (0) | 2022.04.25 |