[jQuery] 이벤트, 이펙트, 애니메이션

밍·2024년 4월 2일
jquery

jQuery/Bootstrap

목록 보기
2/6
post-thumbnail

🍀 이벤트

1) click( )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//배열 생성 후 배열에 넣어서 인식?
		$('#btn1').click(function(){ //매개변수로 function(){};을 전달하면 functio이 이벤트 핸들러가 됨
			$('p').css('background-color','yellow');
		}); 
	});
</script>
</head>
<body>
	<button id="btn1">click</button>
	<p>내용</p>
</body>
</html>

  • button 클릭 시

2) hover( ) / mouseover, mouseout( )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
	.reverse{
		background-image:url(../files/winter.jpg);
		color:white;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn1').mouseover(function(){
			$('p').css('background-color','yellow');
		});
		$('#btn1').mouseout(function(){
			$('p').css('background-color','purple');
		});
		
		$('#btn2').hover(function(){
			//mouseover 이벤트 발생 시 호출
			$('p').css('background-color','yellow');
		},function(){
			//mouseout 이벤트 발생 시 호출
			$('p').css('background-color','purple');
		});
		
		$('h1').hover(function(){
			//mouseover 이벤트 발생 시 호출
			//이벤트가 발생한 태그
			$(this).addClass('reverse');
		},function(){
			//mouseout 이벤트 발생 시 호출
			$(this).removeClass('reverse');
		});
	});
</script>
</head>
<body>
	<button id="btn1">mouseover/out</button>
	<button id="btn2">hover</button>
	<p>내용</p>
	
	<hr size="1" width="90%" noshade="noshade"></hr>
	
	<h1>Header - 0</h1>
	<h1>Header - 1</h1>
	<h1>Header - 2</h1>
</body>
</html>

  • mouseover/out & hover 버튼 위에 커서 올릴 시
  • mouseover/out & hover 버튼에서 커서가 벗어날 시
  • h1 태그에 커서 올려놓을 시
    → hover()는 하나의 메서드를 이용해서 mouseover, mouseout 효과를 동시에 줌

3) keyup( )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('textarea').keyup(function(){
			//입력한 글자 수를 구함
									//val() : 태그의 value 속성의 값 반환
			let inputLength = $(this).val().length;
			let remain = 30 - inputLength;
			
			//문서 객체 입력
			$('h1').html(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="30"></textarea>
	</div>
</body>
</html>

※ maxlength 크기만큼만 데이터 입력 가능
※ 순간적으로 -1(음수일 시 색상이 red로 변경됨)이 될 수는 있지만 전달은 불가

4) on( ) : 이벤트 연결(통합) 메서드

이벤트를 등록한 이후에도 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
	.reverse{
		background:black;
		color:white;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//click 이벤트 연결
				//이벤트 타입, 이벤트 핸들러
		$('h1').on('click',function(){
			//이벤트가 발생한 태그
			$(this).html(function(index,html){
				return html + '+';
			});
		});
		
		$('h1').on({
			mouseover:function(){
				//클래스 추가
				$(this).addClass('reverse');
			},
			mouseout:function(){
				//클래스 제거
				$(this).removeClass('reverse');
			}
		});
	});
</script>
</head>
<body>
	<h1>Header - 0</h1>
	<h1>Header - 1</h1>
	<h1>Header - 2</h1>
</body>
</html>

  • h1태그 클릭할 때마다 + 추가
  • h1태그에 마우스 커서 올릴 시 on메서드 동작

** 미래에 만들어질 태그에도 이벤트 연결 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//.on() : 현재 존재하는 태그에 이벤트 연결할 수 있고, 동적으로 생성된 태그에도 이벤트 연결 가능
		
		//동적으로 생성된 태그에 이벤트 연결
					//이벤트 타입, 이벤트가 발생하는 태그, 이벤트 핸들러
		$(document).on('click','h1',function(){
			let length = $('h1').length; //h1태그의 개수
			//이벤트가 발생한 태그의 내용 반환
			let targetHTML = $(this).html();
			//태그를 생성해서 div에 추가
			$('#wrap').append('<h1>' + length + ' - ' + targetHTML + '</h1>');
		});
	});
</script>
</head>
<body>
	<div id="wrap">
		<h1>Header</h1>
	</div>
</body>
</html>

5) trigger( ) : 이벤트 강제 발생

ex) 설정 시 가만히 있어도 마우스가 클릭한 것 같은 효과를 줌

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//.trigger(이벤트 타입) : 이벤트 강제 발생
		$('h1').on('click',function(){
			$(this).html(function(index, html){
				return html + '*';
			});
		});
		
		//1초마다 함수를 실행
		setInterval(function(){
			//이벤트 강제 발생
			$('h1').trigger('click');
		},1000);
	});
</script>
</head>
<body>
	<h1>Start : </h1>
</body>
</html>

  • h1태그 누를 시 on메서드 동작

  • 1초마다 *이 추가되는 함수 실행

🍀 이펙트

: 효과 메서드

▶︎ show( ), hide( ), toggle( )

  • show( ) : 숨겨져 있던 효과를 노출시킴

  • hide( ) : 노출되어 있는 요소를 숨김

  • toggle( ) : 숨겨져 있던 요소는 노출시키고, 노출되어 있던 요소는 숨김

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn1').on('click',function(){
			//속도값 : fast(200), normal(400), slow(600)
					 //millisecond로 지정 가능
			$('#dog').show('slow',function(){
				//태그의 노출이 완료되면 매개변수로 전달한 함수 호출
				alert('노출 완료!!');
			});
		}); //btn1 이벤트 연결
		
		$('#btn2').on('click',function(){
						 //속도값
			$('#dog').hide(1000,function(){
				//태그가 숨겨진 후 매개변수로 전달된 함수 호출
				alert('숨김 완료!!');
			});
		}); //btn2 이벤트 연결
		
		$('#btn3').on('click',function(){
			//선택한 요소가 보이면 숨기고, 숨겨져 있으면 나타나도록 처리
			$('#dog').toggle('slow');
		});  //btn3 이벤트 연결
	});
</script>
</head>
<body>
	<button id="btn1">Show</button>
	<button id="btn2">Hide</button>
	<button id="btn3">Toggle</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none">
</body>
</html>

  • show 버튼 클릭 시
  • hide 버튼 클릭 시
  • toggle 버튼 클릭 시 현재 상태 반대로 동작
    → 모든 동작은 점차적으로 커지고 작아짐

▶︎ fadeIn(), fadeOut(), fadeToggle()

  • fadeIn() : 숨겨져 있던 요소가 점점 선명해지면서 노출

  • fadeOut() : 노출되어 있던 요소는 점점 투명해지면서 숨겨짐

  • fadeToggle() : 노출되어 있던 요소는 점점 투명해지며 사라지고, 사라져 있던 요소는 선명해지면서 노출

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn1').on('click',function(){
			//천천히 선명해짐
			$('#dog').fadeIn('slow');
		}); //btn1 이벤트 연결
		
		$('#btn2').on('click',function(){
			//1초 동안 투명해지면서 사라짐
			$('#dog').fadeOut(1000);
		}); //btn2 이벤트 연결
		
		$('#btn3').on('click',function(){
			//이미지가 선명하면 투명하게, 투명하면 선명하게 처리
			$('#dog').fadeToggle('fast');
		}); //btn3 이벤트 연결
	});
</script>
</head>
<body>
	<button id="btn1">FadeIn</button>
	<button id="btn2">FadeOut</button>
	<button id="btn3">FadeToggle</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none">
</body>
</html>

  • FadeIn 버튼 누를 시 천천히 선명해짐
  • FadeOut 버튼 누를 시 1초 동안 투명해지면서 사라짐
  • FadeToggle 버튼 누를 시 이미지가 선명하면 투명하게, 투명하면 선명하게 처리

▶︎ fadeTo()

  • fadeTo() : 노출되어 있던 요소에 투명도를 지정한 만큼 숨김
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn1').on('click',function(){
			//투명도 0~1
			$('#dog').fadeTo('slow',0.3);
		}); //btn1 이벤트 연결
		
		$('#btn2').on('click',function(){
			//완전 불투명
			$('#dog').fadeTo('slow',1);
		}); //btn2 이벤트 연결
	});
</script>
</head>
<body>
	<button id="btn1">투명도(30%)</button>
	<button id="btn2">투명도(100%)</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100">
</body>
</html>
  • 투명도 30% 버튼 누를 시
  • 투명도 100% 버튼 누를 시

▶︎ slideUp(), slideDown(), slideToggle()

  • slideUp() : 노출되어 있던 요소를 위로 접으며 숨김

  • slideDown() : 숨겨져 있던 요소가 밑으로 펼쳐지며 노출

  • slideToggle() : 숨겨져 있던 요소는 아래로 펼쳐지며 노출되고, 노출되어 있던 요소는 위로 접으면서 숨김

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
	h1{
		width:300px;
		height:200px;
		background-color:#FF0;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn1').on('click',function(){
			//위로 올라가면서 숨겨짐
			$('h1').slideUp(1000);
		}); //btn1 이벤트 연결
		
		$('#btn2').on('click',function(){
			//아래로 내려가면서 보여짐
			$('h1').slideDown('slow');
		}); //btn2 이벤트 연결
		
		$('#btn3').on('click',function(){
			$('h1').slideToggle('fast');
		}); //btn3 이벤트 연결
	});
</script>
</head>
<body>
	<button id="btn1">SlideUp</button>
	<button id="btn2">SlideDown</button>
	<button id="btn3">SlideToggle</button>
	<h1>내용</h1>
</body>
</html>
  • slideup 버튼 누를 시 위로 올라가면서 숨겨짐
  • slidedown 버튼 누를 시 아래로 내려가면서 보여짐
  • slidetoggle 버튼 누를 시 현재 상태의 반대로 빠르게 동작

🍀 애니메이션

▶︎ animate( )

  • animate( ) : 선택한 요소에 애니메이션 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
	h1{width:50px; height:30px; background-color:red; font-size:100%;}
	h2{width:50px; height:30px; background-color:orange; font-size:100%;}
	h3{width:50px; height:30px; background-color:aqua; font-size:100%;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//animate({애니메이션 속성},효과 속도,콜백 함수); / 콜백 함수 = 메서드 내에서 실행되는 함수
		//애니메이션 속성 : 모션으로 적용할 속성을 스타일(CSS)을 이용해 입력
		$('h1').animate({
			marginLeft:'250px'
		},5000,function(){
			alert('도착 완료!');
		});
		
		$('h2').animate({
			marginLeft:'250px',
			opacity:0.3,
			width:'100px',
			height:'100px'
		},5000);

		$('h3').animate({marginLeft:'250px'},3000)
			   .animate({marginLeft:'100px'},2000)
	});
</script>
</head>
<body>
	<h1>내용</h1>
	<h2>내용</h2>
	<h3>내용</h3>
</body>
</html>

  • 5초 동안 h1 태그를 밀어냄

  • 5초 동안 h2 태그를 밀어내면서 크기도 커짐

  • 3초 동안 h3태그를 왼쪽 여백 250px 위치로 이동 후 2초 동안 왼쪽 여백 100px 위치로 이동

profile
밍
이전 포스트

[jQuery] 연결방법, 클래스 제어, 속성 검사, 문서 객체의 내부 검사/제거/삽입

다음 포스트

[jQuery] jQuery UI

0개의 댓글