쌍용교육 -jquery수업 41일차 jQuertEvent(1)

구 승 2024. 4. 16. 17:44

s01_click.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>click,mouseover,mouseout 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	//click이벤트 연결 		이벤트 핸들러
	$('#btn1').click(function(){
		$('p').css('background','yellow');
	});
	//mouseover 이벤트 연결
	$('#btn2').mouseover(function(){
		$('p').css('background-color','pink');
	});
	//mouseout 이벤트 연결
	$('#btn2').mouseout(function(){
		$('p').css('background-color','purple');
	});
	//hover 메서드를 이용해서 mouseover,mouseout 이벤트 연결
	$('#btn3').hover(function(){
		//mouseover 이벤트를 처리하는 이벤트 핸들러
		
		$('p').css('background-color','green');
	},function(){
		//mouseout 이벤트를 처리하는 이벤트 핸들러
		$('p').css('background-color','skyblue');
	});
});
</script>
</head>
<body>
	<button id="btn1">click</button>
	<button id="btn2">mouseover/out</button>
	<button id="btn3">hover</button>
	<p>내용</p>
</body>
</html>

s02_hover.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover메서드를 이용한 mouseover,mouseout 이벤트 처리</title>
<style type="text/css">
	.reverse{
		background-image:url(../files/landscape.jpg);
		color:white; 
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	//hover 메서드를 이용한 이벤트 연결
	$('h1').hover(function(){
		//mouseover 이벤트를 처리하는 이벤트 핸들러
		$(this).addClass('reverse'); //jQuery는 그냥 this만 쓸 수 없음 this는 이벤트를 발생한 태그만을 의미하기 떄문
	},function(){
		//mouseout 이벤트를 처리하는 이벤트 핸들러
		$(this).removeClass('reverse');
	});
});
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

s03_keyup.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>key 이벤트</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	//keyup 이벤트 연결
	$('textarea').keyup(function(){
		//입력한 글자 수를 구함
		let inputLength = $(this).val().length;
		let remain = 30-inputLength;
		
		//문서 객체에 저장
		$('h1').text(remain);
		
		//문서 객체의 색상을 변경
		if(remain >= 0){
			$('h1').css('color','black');
		}else{
			$('h1').css('color','red');
		}
	});
});
</script>
</head>
<body>
	<div>
		<p>지금 내 생각을</p>
		<h1>30</h1>
		<textarea rows="5" cols="70" maxlength="50"></textarea>
	</div>
</body>
</html>