하루에 글 하나씩은 올리기로 마음먹었으나 잠시 또 게으름을 피우고 말았다.
그럴때마다 작심삼일이 되지 않도록 다시한번 마음을 다잡는 수밖에 없겠지.
프론트단 웹개발을 위해서 피해갈 수 없는 요소중의 하나의 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; }