jQuery Ch.01 객체 속성 바꾸기

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

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

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

<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;
}

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: