본문 바로가기
프로그래밍/Jquery

2021년 10월 6일 - figure & 배열 each & Animate, delay & onEvent

by 철제백조 2021. 10. 6.

☆ 서브 메뉴 복습 ★★★

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style type="text/css">

	.red{color: red;}
	.green{color: green;}
	.blue{color: blue;}
	
	div.content>b{
		cursor: pointer;
		font-family: 'Comic Sans Ms';
		font-size: 25pt;
	}
	
	div.answer>h5{
		/* 들여쓰기 */
		text-indent: 30px;
	}

</style>

<script type="text/javascript">

	/* 헤드와 바디의 차이점은 $ 펑션을 먼저 주느냐 안주느냐의 차이이다 */
	/* 헤드일때 준다 */
	
	$(function(){
		
		/* 각 메인 메뉴들만 보이게 하기 */
		$("div.answer").hide();
		
		/* 서브메뉴만 팝업 */
		$("div.content>b").click(function(){
			
			/* b태그의 다음값 */
			$(this).next().show("slow");
			
			/* 클릭한 곳의 부모(div.content)의 형제들(siblings) */
			$(this).parent().siblings().find("div.answer").hide("slow");
		});
		
	})

</script>

</head>
<body>

	<div class="content red">
		<b>내용 1</b>
			<div class="answer">
				<h5>내용 1에대한 댓글1</h5>
				<h5>내용 1에대한 댓글2</h5>
				<h5>내용 1에대한 댓글3</h5>
			</div>
	</div>

	<div class="content green">
		<b>내용 2</b>
			<div class="answer">
				<h5>내용 2에대한 댓글1</h5>
				<h5>내용 2에대한 댓글2</h5>
				<h5>내용 2에대한 댓글3</h5>
			</div>
	</div>

	<div class="content blue">
		<b>내용 3</b>
			<div class="answer">
				<h5>내용 3에대한 댓글1</h5>
				<h5>내용 3에대한 댓글2</h5>
				<h5>내용 3에대한 댓글3</h5>
			</div>
	</div>

</body>
</html>

 

 

 

☆ figure

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

	<h3>이미지 아래에 제목달고 싶을때 #1</h3>
	<img alt="" src="../image/01.png">
	<img alt="" src="../image/02.png">

	<br>
	
	<b style="margin-left: 20px;">이미지1</b>
	<b style="margin-left: 100px;">이미지2</b>


	<!-- 이미지 아래 글 달고싶을때 figure 캡션을 쓴다 -->
	<h3>이미지 아래에 제목달고 싶을때 #2</h3>
	<figure style="position: absolute; left: 400px; top: 300px;">
		<img alt="" src="../image/03.png">
		<figcaption>이미지3</figcaption>
	</figure>
	
	<figure>
		<img alt="" src="../image/04.png">
		<figcaption><b>이미지4를 이미지 어디든 삽입가능한 태그</b></figcaption>
	</figure>

</body>
</html>

 

 

 

☆ 배열 each

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	div.box {
		border: 5px solid tomato;
		margin-top: 20px;
		width: 300px;
		height: 120px;
		padding: 20px 20px;
		font-family: 'Comic Sans Ms';
		font-size: 1.3em;
	}

</style>

</head>
<body>

	<h3>배열반복시 사용하는 $.each문</h3>


<script type="text/javascript">

	var data1 = ["red", "blue", "magenta", "yellow", "gray", "orange"];
	
	
	/* 배열 data에 대한 함수를 만들어 실행 */
	/* i: 인덱스, elt: 인덱스에 해당하는 아이템값 */
	$.each(data1, function(i, elt){
		
		var s = "<h2 style='color:" + elt + "; width:200px;'>" + elt + "</h2>"; 
		document.write(s);
	});

</script>


	<hr>
	
	<div id="show"></div>


<script type="text/javascript">

	var info= [
		{name:"홍길동", hp:"010-1234-5678", addr:"서울시 서대문구"},
		{name:"유재석", hp:"010-5555-9999", addr:"서울시 마포구"},
		{name:"강호동", hp:"010-7777-8888", addr:"서울시 강남구"},		
		];
	
	
	var s = "";
	
	$.each(info, function(i, elt){
		
		s+= "<div class='box'>";
		s+= "이름: " + elt.name + "<br>";
		s+= "hp: " + elt.hp + "<br>";
		s+= "주소: " + elt.addr + "<br>";
		s+= "</div>";
				
	});
	
	$("#show").html(s);

</script>
	
</body>
</html>

 

 

 

☆ 배열 each

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style type="text/css">

	.fg{
		float: left;
	}

	.fg img{
		border: 5px groove orange;
		border-radius: 50px;
		padding: 10px;
		cursor: pointer;
	}
	
	.fg figcaption{
		font-weight: bold;
		font-family: 'Comic Sans Ms';
		font-size: 1.3em;
	}
	
	.large{
		width: 400px;
		height: 500px;
		position: absolute;
		left: 400px;
		top: 220px;
		border: 5px inset gold;
	}

</style>


<script type="text/javascript">

	$(function(){
		
		//큰이미지
		$("img.large").attr("src",$(".fg img:eq(0)").attr("src"));
		
		//작은 이미지에 마우스 올려놓을 경우, 45도 회전, 벗어나면 제자리
		$(".fg img").hover(function(){
			
			$(this).css("transform", "rotate(45deg)");
			
		}, function(){
			
			$(this).css("transform", "rotate(0deg)");
			
		})
		
		
		//작은 이미지 클릭하면 해당 이미지 large하게 나타나게 함
		$(".fg img").click(function(){
			
			$("img.large").attr("src",$(this).attr("src"));			
		});
	});

</script>

</head>
<body>

	<div id="show"></div>
	<img alt="" src="" class="large" id="large">


<script type="text/javascript">

	var imginfo = [
		{name: "../image/01.png", caption: "이미지1", width: "120"},
		{name: "../image/02.png", caption: "이미지2", width: "130"},
		{name: "../image/03.png", caption: "이미지3", width: "80"},
		{name: "../image/04.png", caption: "이미지4", width: "120"},
		{name: "../image/05.png", caption: "이미지5", width: "110"},
	];

	
	var s ="";
	
	/* 배열에 대한 함수출력 */
	$.each(imginfo, function(i, elt){
		
		s+= "<figure class='fg'>";
		s+= "<img src='" + elt.name + "' width='" + elt.width + "'>";
		s+= "<figcaption>" + elt.caption + "</figcaption>";
		s+= "</figure>";
	});
	
	$("#show").html(s);
	
</script>
</body>
</html>

 

 

 

☆ Animate, delay

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

	<button type="button">애니메이션#1</button>
	<button type="button">애니메이션#2</button>
	
	<div id="box"></div>


<script type="text/javascript">

	$("#box").css({
		
		"width": "100px",
		"height": "100px",
		"border": "1px solid red"
	});
	
	
	$("button:eq(0)").click(function(){
		
		/* 3초에 걸쳐서 */
		$("#box").animate({width:"+=100px", 'borderWidth': '20px', opacity: "0.2", marginLeft: "300px"},3000);
	});
	
	
	$("button:eq(1)").click(function(){
		
		/* 본래대로 */
		$("#box").animate({width:"-=100px", borderWidth: "1px", opacity: "1", marginLeft: "0px"}, 3000);
	})

</script>


	<hr>
	
	<div class="box2"></div>
	<div class="box2"></div>
	<div class="box2"></div>
	<div class="box2"></div>
	<div class="box2"></div>
	<div class="box2"></div>


<script type="text/javascript">

	$(".box2").css({
		
		position: 'relative',
		width: '60px',
		height: '60px',
		backgroundColor: "tomato",
		marginTop: "5px"
	});

	
	//box2에 300px씩 이동
	$(".box2").each(function(i,elt){
		
		$(this).delay(i*500).animate({left:"+=300px"}, 'slow');
	});
	
</script>


	<hr>
	<img alt="" src="../image/01.png" id="img1">
	
	
<script type="text/javascript">

	/* 사라졌다가 멈추고 나타나기 */
	$("#img1").slideUp(2000).delay(1000).slideDown(2000);

</script>	

</body>
</html>

 

 

 

☆ onEvent

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<script type="text/javascript">

	$(function(){
		
		/* click() 최초에 선언된 element에만 동작 */

		/* 두번째 파라메타에선 지정자를 선택 가능 */
		
		
		//정적이벤트
/* 		$("mylang").children().click(function(){
			%(this).remove();
		})
 */		
		/* 추가된 후, 삭제안됨 */
/* 		$("#mylang").append('<li>JavaScript</li>');
 */
 
		//동적이벤트 - 동적으로 이벤트를 바인딩할 수 있는가의 차이
		$("#mylang").on("click", 'li', function(){
			
			$(this).remove();
		});
 
		$("#mylang").append('<li>JavaScript</li>');
	});

</script>

<body>

	<ul id="mylang">
		<li>Java</li>
		<li>Oracle</li>
		<li>Jquery</li>
	</ul>

</body>
</html>

 

 

 

☆ onEvent ★★★★★

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

	$(function(){
		
		//정적이벤트 안됨 on
		/*  $("button[name='add']").on("click",function(){
		 
		 $('body').append("<button name='add'>B</button>");
	 }); */
	 
	 	//동적이벤트 가능하게 변경
	 	//추가된 element에 계속해서 부모의 이벤트를 가질 수 있게 만든다
	 	//on(1.이벤트 2.지정자 3.구현부)
	 	$(document).on("click", "button[name='add']", function(){
	 		
	 		$('body').append("<button name='add'>B</button>");
	 	});

		
	});

</script>

</head>
<body>

	<button name="add">B</button>

</body>
</html>

 

 

 

☆ 영화예매 ★★★★

 



 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">

	button{
		width: 120px;
		height: 40px;
		border-radius: 20px;
		font-size: 1.3em;
		font-family: Nanum Pen Script;
		cursor: pointer;
	}
	
	button.a{
		background: #8b008b;
		color: #fff;
	}

	button.b{
		background: blue;
	}
	
	div{
		position: absolute;
		width: 300px;
		height: 150px;
		font-size: 20px;
		font-family: "Comic Sans Ms"
	}
	
	#one{
		left: 50px;
		top: 100px;
	}
	
	#two{
		left: 300px;
		top: 100px;
	}
	
	#three{
		left: 700px;
		top: 100px;		
	}
	
	#result{
		left: 100px;
		font-size: 2em;
		text-align: center;
		width: 1000px;
		top: 400px;
		border: 3px solid gold;
		border-radius: 30px;
		padding-top: 20px;
	}
	
	#three h3:hover{
		cursor: pointer;
		background-color: orange;
	}

</style>

<script type="text/javascript">

	$(function(){
		
		var theater = "";
		var movie = "";
		
		//#one에 버튼추가
		var b= "<button type='button' id='btn1' class='a'>영화예매</button>";
		$("#one").append(b);
		
		
		//버튼1 이벤트
		$("#btn1").click(function(){
			
			var b2= "<button type='button' id='btn2' class='b'>극장선택</button>";
			b2+= "&nbsp; <button type='button' id='btn3' class='c'>영화선택</button>";
			$("#two").html(b2);
		});
		
		
		//버튼2 이벤트 - 동적생성이므로 on 이벤트
		$(document).on("click", "#btn2", function(){
			
			var s= "<h3 class='theater'>CGV강남정</h3>";
			s+= "<h3 class='theater'>MEGABOX 코엑스점</h3>";
			s+= "<h3 class='theater'>CGV 교보점</h3>";
			
			$("#three").html(s);
		});
		
		
		//버튼 3도 나중에 동적생성이므로 on 이벤트 ... three 나타나게
		$(document).on("click", "#btn3", function(){
			
			var s= "<h3 class='movie'>D.P</h3>";
			s+= "<h3 class='movie'>싱크홀</h3>";
			s+= "<h3 class='movie'>모가디슈</h3>";
			
			$("#three").html(s);
		});
		
		
		//영화관이나 제목을 클릭시 이벤트
		$(document).on("click", "#three h3", function(){
			
			//출력한 h3 태그에서 class를 얻는다
			var select= $(this).attr("class");

			//if문 극장선택시
			if(select=='theater'){
				theater= "극장명: " + $(this).text();
			} else {
				movie= "영화제목: " + $(this).text();
			}
			
			$("#result").html(theater+"<br>"+movie);
	
		});

	});

</script>
</head>
<body>

	<div id="one"></div>
	<div id="two"></div>
	<div id="three"></div>
	<div id="result"></div>

</body>
</html>

 

 

 

Q.

★★★★★★★★★★

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style type="text/css">

	body, h1, ul {
		margin: 0;
		padding: 0;
	}
	
	list {
		list-style: none;
	}
	
	body {
		background-color: #fff;
	}
	
	div.wall {
		width: 800px;
		height: 600px;
		margin: 50px auto;
		background-color: #999;
		position: relative;
		border-radius: 5px;
		border: 5px solid #333;
		/* 스크롤바 해제 - 기본은 auto */
		overflow: hidden;
	}
	
	h1.title {
		font-size: 37px;
		position: absolute;
		right: 50px;
		top: 60px;
		width: 130px;
	}
	
	ul.list{
		position: absolute;
		width: 100%;
		height: 100px;
		bottom: 0;
		left0: 0;
		border-top: 1px solid #666;
	}
	
	ul.list li{
		float: left;
		margin-left: 10px;
		margin-top: 10px;
		width: 70px;
		height: 70px;
		border: 5px solid #333;
		border-radius: 10px;
		cursor: pointer;
	}
	
	div.wall ul.list li img{
			width: 100%;
	}
	
	/* 제이쿼리에서 사용될 클래스 */
	/* 이렇게 더해야 다른 class들이 안사라진다 */
	  div.wall ul.list li.active{
		/* 벽지샘플 테두리 */
		border-color: #ff1493;
	}
	
</style>


<script type="text/javascript">

	$(function(){
		
		//벽지리스트 이미지 클릭시
		$("img").click(function(){
		
			//현재클릭한 이미지의 부모인 li에 active 클래스 추가하기
			$(this).parent("li").addClass("active");
			
			//부모태그의 형제태그에 들어있는 active 제거
			$(this).parent("li").siblings().removeClass("active");
			
			//클릭한 이미지의 title 속성 얻기
			var title = $(this).attr("title");
			
			//위에서 얻은 title을 h1에 넣음
			$("h1").text(title);
			
			//클릭한 이미지의 src속성 얻음
			var path = $(this).attr("src");
			
			//얻은 변수를 이용해 div.wall에 배경이미지로 넣음
			$("div.wall").css("background-image", "url("+ path +")");
			
		});
				
	});

</script>

</head>
<body>

	<div class="wall">
		<h1 class="title">Select Page</h1>
		<img alt="" src="../image/cover2.png" id="img">
		
		<ul class="list">
			<li><img alt="" src="../image/b01.png" title="Pear"></li>
			<li><img alt="" src="../image/b02.png" title="Checker"></li>
			<li><img alt="" src="../image/b03.png" title="Bamboo"></li>
			<li><img alt="" src="../image/b04.png" title="Pencil"></li>
			<li><img alt="" src="../image/b05.png" title="Leap"></li>
			<li><img alt="" src="../image/b06.png" title="Forest"></li>
		</ul>
	</div>

</body>
</html>

'프로그래밍 > Jquery' 카테고리의 다른 글

2021년 10월 8일 - 응용 & 부트스트랩 - modal & MySQL  (0) 2021.10.08
2021년 10월 7일 - trigger & zindex & 전체 이미지에서 일부만 불러오기 & 테이블 형식 클래스 추가 제거 & 미니언즈 게임 제작  (0) 2021.10.07
2021년 10월 5일 - hover, transform - rotate, scale, translate & parent(), siblings(), children(), next(), prev(): & fade in, fade out & animate  (0) 2021.10.05
2021년 10월 1일 - Form Tag & hover & each 함수 & form - select, checkbox, radio & append & after  (0) 2021.10.01
2021년 9월 30일 - JQery - add, attr & eq, append & 클릭 이벤트 & addClass, removeClass, toggleClass & mouseOver, mouseOut & RGB 창 구현  (0) 2021.09.30

관련글

댓글

티스토리툴바