jQuery Ch.01 객체 속성 바꾸기

하루에 글 하나씩은 올리기로 마음먹었으나 잠시 또 게으름을 피우고 말았다.
그럴때마다 작심삼일이 되지 않도록 다시한번 마음을 다잡는 수밖에 없겠지.

프론트단 웹개발을 위해서 피해갈 수 없는 요소중의 하나의 jQuery에 대해 책을 한권 사서 따라가보기로 했다. 첫번째 장의 내용은 HTML상의 객체를 지정하고 액션에 대해 css의 속성을 변경하는 작업이다.

실행결과 ==> CLICK
설명
– 텍스트박스를 마우스 클릭하면 강아지 사진이 나타난다.
– 링크가 걸린 텍스트 위에 마우스를 가져가면 강아지 사진이 나타난다.
키워드
– $(document) : HTML DOM 객체의 Root를 가리킨다
– $(“#clickMe”) : DOM 내에서 Id=’clickMe’인 객체를 가리킨다
– .fadeIn(), .fadeOut() : ms 단위의 시간으로 나타나고 사라지게 하는 함수
– .slideToggle() : 접거나 펼치는 함수
결과

<HTML> jquery_ch01.html

<!DOCTYPE html>
<html> 
<head>
	<title>Furry Friends Campaign</title>
	<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>

	<div id="clickMe">오늘의 털 많은 친구를 보여주세요</div>
	<div id="picframe">
			<img id="img_furry" src="images/furry_friend.jpg" alt="Our Furry Friend">
	</div>

	<hr />

	<div id="showfriend">
		<a href="#">
			<h2>Our Furry Friends Need Your Help</h2>
		</a>
		<img src="images/furry_friend.jpg" alt="Our Furry Friend">
	</div>

	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script type="text/javascript">

		var toggle_yn = false;
		$(document).ready( function() {
			$("#clickMe").click( function() {

				if( !toggle_yn ) {
					$("#img_furry").fadeIn(500);
					$("#picframe").slideToggle("slow");
					toggle_yn = true;			
				} else {
					$("#img_furry").fadeOut(500);
					$("#picframe").slideToggle("slow");
					toggle_yn = false;
				}

			});
		});

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

<CSS> my_style.css

#clickMe, #picframe{
    background: #D8B36E;
    padding: 20px;
    font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color: #000;
   	border: 2px solid;
	border-color:  #444 #444 #444 #444;
    text-align: center;
    width: 280px;
    display: block;
}

#picframe {
	border-width: 0px 2px 2px 2px;
	border-color:  none #444 #444 #444;
    display: none;
}

/*    
a:link img, a:visited img {
    display: none;
}

a:hover img, a:active img {
    display: block;
}
*/

#showfriend img{
    display: none;
}

#showfriend:hover img{
    display: block;
}

a {
    text-decoration: none;
    color: #000;
}