본문 바로가기
수업내용

20230703 jQeury

by titlejjk 2023. 7. 3.

button을 눌렀을 때 노란색 box가 숨겨지거나 보이게 되도록 해보겠다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect.jsp</title>
<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		border: 1px solid red;
	}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
	<button id="hideBtn">숨기기</button>
	<button id="showBtn">보이기</button>
	<div class="box"></div>
	<script>
		$("#hideBtn").on("click", function(e){
			$(".box").css("display", "none");
		});
		$("#showBtn").on("click", function(e){
			$(".box").css("display","");
		})
	</script>
</body>
</html>

위 코드 말고 이런 동작을 해주는 메서드가 따로 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect.jsp</title>
<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		border: 1px solid red;
	}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
	<button id="hideBtn">숨기기</button>
	<button id="showBtn">보이기</button>
	<button id="toggleBtn">토글</button>
	<div class="box"></div>
	<script>
		$("#hideBtn").on("click", function(e){
			//$(".box").css("display", "none");
			$(".box").hide();
		});
		$("#showBtn").on("click", function(e){
			//$(".box").css("display","");
			$(".box").show();
		})
		$("#toggleBtn").on("click", function(){
			$(".box").toggle();
		});
	</script>
</body>
</html>
.hide();
.show();
.toggle(); //스위치 처럼 껐다 켰다를 할 수 있다.

이를 이용해 함수를 만들수도 있다.

아래에 있는 .show()와 .toggle()에도 똑같이 적용된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect3.jsp</title>
<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		border: 1px solid red;
	}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
	<button id="hideBtn">숨기기</button>
	<button id="showBtn">보이기</button>
	<button id="toggleBtn">토글</button>
	<div class="box"></div>
	<script>
		$("#hideBtn").on("click", function(){
			$(".box").fadeOut(1000, function(){
				alert("호엥");
			});
		});
		$("#showBtn").on("click", function(){
			$(".box").fadeIn({
				duration:2000,
				complete:function(){
					alert("호에에엥");
				}
			});
		});
		$("#toggleBtn").on("click", function(){
			$(".box").fadeToggle();
		});
	</script>
</body>
</html>

위의 코드는

#hideBtn은 1초 후에 알림창으로 "호엥"출력

#showBtn은 2초 후에 알림창으로 "호에에엥"출력

#toggleBtn은 꺼졌다 켜졌다

하는 동작을 해준다.

css3에서는 트랜지션, 애니메이션 동작으로 쉽게 구현할 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect3.jsp</title>
<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: yellow;
		border: 1px solid red;
		/* transition 효과를 줄 수 있는 모든 (all) css속성에 대해서 1초(1s)동안 일정한 비율(linear)로
			적용을 시켜라
		*/
		transition: all 1s linear;
	}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
	<button id="hideBtn">숨기기</button>
	<button id="showBtn">보이기</button>
	<button id="toggleBtn">토글</button>
	<button id="moveBtn">움직이기</button>
	<button id="boveBtn2">움직이기2</button>
	<button id="moveBtn3">움직이기3</button>
	<div class="box"></div>
	<div class="box2"></div>
	<script>
		$("#moveBtn3").on("click", function(){
			$(".box2").css("margin-left", "100px")
		});
	/*
		1. 움직이기 버튼을 눌렀을 때, .box div를 오른쪽으로 100px움직이도록 해 보세요
		단, 1초동안 진행되도록
	*/
		$("#moveBtn").on("click", function(){
			
			let mLeft=0;
			
			//10/1000초 마다 한번씩 호출되는 함수 안에서
			/* setInterval(function(){
				mLeft += 1;
				if(mLeft>=101){
					return;
				}
				$(".box").css("margin-left", mLeft+"px");
			},10);
		}); */
		// 10/1000초 마다 한번씩 호출되는 함수 안에서 .box를 움직이기
		let seq = setInterval(function(){
			mLeft += 1;
			$(".box").css("margin-left", mLeft+"px");
			if(mLeft == 100){
				//인터발의 순서값(sequence)값을 이용햇 취소하기
				clearInterval(seq);
			}
		},10);
		
		$("#mobeBtn2").on("click", function(){
			$(".box").animate({
				marginLeft:"+=100px"
			}, 1000);
		})
	
		$("#hideBtn").on("click", function(){
			$(".box").fadeOut(1000, function(){
				alert("호엥");
			});
		});
		$("#showBtn").on("click", function(){
			$(".box").fadeIn({
				duration:2000,
				complete:function(){
					alert("호에에엥");
				}
			});
		});
		$("#toggleBtn").on("click", function(){
			$(".box").fadeToggle();
		});
	</script>
</body>
</html>

'수업내용' 카테고리의 다른 글

20230703 이미지갤러리 만들기  (0) 2023.07.03
20230703 댓글 기능 구현  (0) 2023.07.03
20230629 jQeury  (0) 2023.06.29
20230628 수업내용 Up/DouwnloadFile🤣🤣🤣  (0) 2023.06.28
20230628 수업내용🫡🫡🫡  (0) 2023.06.28

관련글

댓글

티스토리툴바