본문 바로가기
카테고리 없음

[Day42][Jquery] hover / opacity / 객체 배열 / prepend() / append() / empty() / remove()

clapdev 2019. 10. 24. 18:33

mouseover, mouseout

 

▷ 두 번째 방법 (bind X)

 

-- Folder(chap05)에 Html File(mouseOvermouseOut) 복사하여 Html File(mouseOvermouseOut2) 생성

 

chap05 mouseOvermouseOut.html head script

$(document).ready(function(){
	$(".buttons").mouseover(function(){
		var $target = $(event.target);
			
		if($target.is(".picture1")){
			$("div#face").html(setImage('kimth.jpg'));
			$("div#comment").html(setComment('김태희',25)); 
			$("div#seconddiv").show();
		}
			
		else if($target.is(".picture2")){
			$("div#face").html(setImage('iyou.jpg'));
			$("div#comment").html(setComment('아이유',27)); 
			$("div#seconddiv").show();
		}
			
		else if($target.is(".picture3")){
			$("div#face").html(setImage('parkby.jpg'));
			$("div#comment").html(setComment('박보영',30)); 
			$("div#seconddiv").show();
		}
	});
		
$(".buttons").mouseout(function(){
		$("div#seconddiv").hide();
	});

 

-- Html File(mouseOvermouseOut)와 결과는 동일하다.

 

 

Ⅰ. hover

 

-- hover : mouseover와 mouseout이 결합된 것

-- Folder(chap05)에 Html File(mouseOvermouseOut2) 복사하여 Html File(hover) 생성

chap05 hover.html head script

$(document).ready(function(){
		
		$(".buttons").hover(function(){	// mouseover
			
				var $target = $(event.target);
				
				if($target.is(".picture1")){
					$("div#face").html(setImage('kimth.jpg'));
					$("div#comment").html(setComment('김태희',25)); 
					$("div#seconddiv").show();
				}
				
				else if($target.is(".picture2")){
					$("div#face").html(setImage('iyou.jpg'));
					$("div#comment").html(setComment('아이유',27)); 
					$("div#seconddiv").show();
				}
				
				else if($target.is(".picture3")){
					$("div#face").html(setImage('parkby.jpg'));
					$("div#comment").html(setComment('박보영',30)); 
					$("div#seconddiv").show();
				}
			
		}, function(){	// mouseout
			
			$("div#seconddiv").hide();
			
		});
	    
	});

-- 결과는 mouseover, mouseout 과 동일하게 나타난다.

 

 

-- Folder(chap05) 복사하여 Folder(chap06) 생성

-- Html File(mouseOvermouseOut, hover) 삭제

-- Html File(mouseOvermouseOut2)를 01css_addClass_removeClass로 rename

 

chap06 01css_addClass_removeClass.html head

<style type="text/css">

div#container {
	   width: 80%;
	   margin: 0 auto;
}

img {
	margin: 20px;
}

.smallsize {
	width: 80px;
	height: 100px;
	border: solid 2px red;
	
}

</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		
		$("img").mouseover(function(){
			$(this).css("cursor","pointer");
		});
		
		$("#iyou").mouseover(function(){
			$(this).css({'width':'80px'
						 ,'height':'100px'
						 ,'border':'solid 2px red'});
		});
		
		$("#parkby").mouseover(function(){
			$(this).addClass("smallsize");
		});
		
		$("#parkby").mouseout(function(){
			$(this).removeClass("smallsize");
		});
		
	    
	});
		
</script>

 

chap06 01css_addClass_removeClass.html body

<div id="container" align="center">
	<div id="firstdiv">
		<img src="images/kimth.jpg" alt="김태희"/>
		<img id="iyou" src="images/iyou.jpg" alt="아이유"/>
		<img id="parkby" src="images/parkby.jpg" alt="박보영"/>
	</div>
		
	<div></div>
</div>

 

-- Project(JavaScriptStudy)-Folder(chap2)-Html File(01) 복사하여 Project(JqueryStudy)-Folder(chap06)-Html File(02css) 붙여넣기

 

자바 스크립트로 만든 코드를 제이쿼리로 바꾸어 보자.

 

chap06 02css.html head

<style type="text/css">

	div#container {
		width: 90%;
		margin: 0 auto;
		padding: 2%;
	}

	button.btns {
		margin-right: 20px;
		width: 100px;
		height: 50px;
		font-size: 20pt;
	}
	
	div.answer {
		display: inline-block;
	}
	
	div#colorDiv {
		margin-top: 20px;
	}
	
	div#hangulDiv {
		font-size: 60pt;
	}
	
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">

	$(function(){
		
		var btnNameArr = ["red","orange","yellow","green","blue","navy","purple"];
		
		var html = "<span style='font-size: 20pt; background-color: navy; color: white; margin-right: 60px;'>버튼을 눌러 보세요</span>";
		for(var i=0; i<btnNameArr.length; i++){
			html += "<button type='button' class='btns'>" +btnNameArr[i]+ "</button>";
		}
		
		$("#btnsDiv").html(html);
		
		$("button").bind("click", function(){
			
			$("#colorDiv").css({"width":"200px"
							   ,"height":"200px"
							   ,"backgroundColor":$(this).text()});
			
			$("#hangulDiv").css("color",$(this).text());
			
			switch ($(this).text()) {
				
				case "red":
					$("#hangulDiv").text("빨강");
				break;
				
				case "orange":
					$("#hangulDiv").text("주황");
				break;
				
				case "yellow":
					$("#hangulDiv").text("노랑");
				break;
				
				case "green":
					$("#hangulDiv").text("초록");
				break;
				
				case "blue":
					$("#hangulDiv").text("파랑");
				break;
				
				case "navy":
					$("#hangulDiv").text("남색");
				break;
				
				case "purple":
					$("#hangulDiv").text("보라");
				break;
			}
		});
	});
 </script>

 

chap06 02css.html body

<div id="container">
	<div id="btnsDiv"></div>
	<div id="colorDiv" class="answer"></div>
	<div id="hangulDiv" class="answer"></div>
</div>

 

Ⅱ. opacity

 

-- Folder(chap07)와 Html File(01opacity) 생성

-- Folder(chap06)에 있는 Folder(images) 복사하여 붙여넣기

 

chap07 01opacity.html head

<style type="text/css">

div#container {
	   width: 80%;
	   margin: 0 auto;
}

img {
	margin: 20px;
}

</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		
		$("img").css('opacity','0.5');
        
		$("img").hover(function(){
			$(this).css('opacity','1.0');
		}, function(){
			$(this).css('opacity','0.5');
		});  
		
	});
		
</script>

 

-- opacity의 속성값의 범위는 0.0 ~ 1.0 까지이다. 0.0은 완전투명, 1.0은 원본 선명도

 

chap07 01opacity.html body

<div id="container" align="center">
<div id="firstdiv">
	<img id="kinth" src="images/kimth.jpg" alt="김태희"/>
	<img id="iyou" src="images/iyou.jpg" alt="아이유"/>
	<img id="parkby" src="images/parkby.jpg" alt="박보영"/>
</div>

 

 

 

-- 커서를 대면 이미지가 진하게 보이고, 커서를 옮기면 다시 흐려진다.

 

 

-- Folder(chap07)에 Html File(02opacity_quiz) 생성

 

문제 ▷▷

 

1. 세 개의 버튼은 처음에 흐리게 보인다.

 

2. 버튼에 커서를 대면 커서가 포인터로 바뀌면서 색이 진하게 변한고, 버튼에 맞는 이미지가 흐리게 띄워진다.

3. 버튼을 클릭하면 이미지가 진하게 바뀌고, 밑에 성명과 나이가 적힌 코멘트를 띄운다.

4. 커서를 옮기면 사라진다.

 

chap07 02opacity_quiz.html head

<style type="text/css">

div#container {
	   width: 80%;
	   margin: 0 auto;
}

span.buttons {
		display: inline-block;
		border: 2px solid navy;
		margin: 20px;
		padding: 5px;
		background-color: skyblue;
		color: white;
		font-size: 15pt;
		cursor: pointer;
		width: 100px;
		text-align: center;
	}
	
span.name {
	font-size: 12pt;
	font-weight: bold;
	color: blue;
}	

div#comment {
	position: relative;
	left: 44%;
}

</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		
		$(".buttons").css({'opacity':'0.5','cursor':'pointer'});
		
		$(".buttons").hover(function(){
			$(this).css('opacity','1.0');
			
			if($(this).is(".picture1")){
				$("div#face").html(setImage('kimth.jpg'));
				$("img").css('opacity','0.5');
			}
			
			else if($(this).is(".picture2")){
				$("div#face").html(setImage('iyou.jpg'));
				$("img").css('opacity','0.5');
			}
			
			else if($(this).is(".picture3")){
				$("div#face").html(setImage('parkby.jpg'));
				$("img").css('opacity','0.5');
			}
		}
		, function(){
			$(this).css('opacity','0.5');
			
			$("img").hide();
			$("#comment").html("");
			
		});
		
		$(".buttons").bind("click",function(){
			if($(this).is(".picture1")){
				$("img").css('opacity','1.0');
				$("div#comment").html(setComment('김태희',25)); 
				$("div#seconddiv").show();
			}
			
			else if($(this).is(".picture2")){
				$("img").css('opacity','1.0');
				$("div#comment").html(setComment('아이유',27)); 
				$("div#seconddiv").show();
			}
			
			else if($(this).is(".picture3")){
				$("img").css('opacity','1.0');
				$("div#comment").html(setComment('박보영',30)); 
				$("div#seconddiv").show();
			}
		});    
	});
	
	function setImage(imgFilename){
		var result = "<img src='images/"+imgFilename+"' />";
		return result;
	}
	
	function setComment(name, age){
		var result = "1.성명: <span class='name'>"+name+"</span><br/>2.나이: "+age+"세";
		return result;
	}
</script>

 

chap07 02opacity_quiz.html body

<div id="container" align="center">
	<div id="firstdiv">
		<span class="buttons picture1">김태희</span>
		<span class="buttons picture2">아이유</span>
		<span class="buttons picture3">박보영</span>
	</div>
		
	<div id="seconddiv">
		<div id="face" style="margin-bottom: 3%;">
				
		</div>
		<div id="comment" align="left">
		</div>
	</div>
</div>

 

Ⅲ. 객체 배열

 

-- Folder(chap08)와 Html File(objectArray) 생성

 

chap08 objectArray.html head

<style type="text/css">

div#container {
	   width: 80%;
	   margin: 0 auto;
}

span.buttons {
		display: inline-block;
		border: 2px solid navy;
		margin: 20px;
		padding: 5px;
		background-color: skyblue;
		color: white;
		font-size: 15pt;
		cursor: pointer;
		width: 100px;
		text-align: center;
}
	
img {
		margin: 15px;
}

div.data {
	display: inline-block;
	width: 200px;

}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">
	var personArr = [{userid:"kimth", name:"김태희", age:25, school:"서울대학교", image:"kimth.jpg"}
					,{userid:"iyou", name:"아이유", age:27, school:"인천대학교", image:"iyou.jpg"}
					,{userid:"parkby", name:"박보영", age:30, school:"수원대학교", image:"parkby.jpg"}
					];
		
	var names= "";
	var pictures="";
	var profiles="";
	
	$(function(){
		
		for(var i=0; i<personArr.length; i++) {
			names += "<span class='buttons'>"+personArr[i].name+"</span>";
			pictures += "<div class='data' align='left'><img src='images/"+personArr[i].image+"'/></div>";
			profiles += "<div class='data' align='left'>1.성명: "+personArr[i].name+"<br/>2.나이 : "+personArr[i].age+"<br/>3.출신학교: "+personArr[i].school+"<br/></div>";
		}
		$("div#name").html(names);
		$("div#picture").html(pictures);
		$("div#profile").html(profiles);
		
	});

</script>

 

chap08 objectArray.html body

<div id="container" align="center">
	<div id="name"></div>
	<div id="picture"></div>
	<div id="profile"></div>
</div>

 

 

Ⅳ. prepend(), append(), empty(), remove()

 

-- Folder(chap09)와 Html File(01_objectArrayprepend_append_empty_remove) 생성

 

-- 선택자.prepend("내용물"); : 선택자에 내용물을 위쪽 방향으로 덧붙여 가는 것

-- 선택자.append("내용물"); : 선택자에 내용물을 아래쪽 방향으로 덧붙여 가는 것

-- 선택자.empty(); : 선택자 태그 속에 있는 내용물을 비우는 것

 

chap09 01_objectArrayprepend_append_empty_remove.html head

<style type="text/css">
	div#container{
		width: 90%;
		margin: 0 auto;
		padding-left: 2%;
		padding-bottom: 3%;
	}
	
	div#divBtn {
		width: 90%;
		min-height: 40px;
		margin: 20px;
	}
	
	span.buttons {
   		border: solid 2px orange;
		display: inline-block;
		width: 100px;
		height: 30px;
		margin: 10px;
		padding: 5px;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
	}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">
	
	$(function(){
		
		var cnt = 0;
		var lovecountrysong = "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 <span style='color: red; font-weight: bold;'>우리나라</span> 만세";
		var lovecountrysong2 = "무궁화 삼천리 화려강산 <span style='color: blue; font-weight: bold;'>대한사람</span> 대한으로 길이 보전하세";
		
		$(".add").click(function(){
			cnt++;
			$(".div1").prepend("<p>"+cnt+"."+lovecountrysong+"</p>");
			$(".div2").append("<p>"+cnt+"."+lovecountrysong2+"</p>");
		});
		
		$(".empty").click(function(){
			$(".div1").empty();
			$(".div2").empty();
		});
		
		$(".remove").click(function(){
			$(".div1").remove();
			$(".div2").remove();
		});
	});
</script>

 

chap09 01_objectArrayprepend_append_empty_remove.html body

<div id="container">
	<div id="divBtn" align="center">
		<span class="buttons add">추가</span>
		<span class="buttons empty">empty</span>
		<span class="buttons remove">remove</span>
	</div>
		
	<div class="content div1">
		<span style="color: red; font-weight: bold;">애국가(prepend)</span>
	</div>
	<div class="content div2">
		<span style="color: blue; font-weight: bold;">애국가(append)</span>
	</div>
</div>

 

 

티스토리툴바