.on()

by Kim Ara

HTML

<div class="cu_m_sec_b_guide">
  <h2>GUIDE</h2>
  <ul>
    <li class="item01"><a href="#">자주 묻는 질문</a></li>
    <li class="item02"><a href="#"><span>대량 구매 문의</span></a></li>
    <li class="item03"><a href="#"><strong>비회원 주문조회</strong></a></li>
    <li><a href="#">1:1 문의</a></li>
    <li><a href="#">A/S 센터 찾기</a></li>
    <li><a href="#">제품 메뉴얼</a></li>
  </ul>
</div>

<!-- blur예제 -->
<div>name : <input type='text' name='fullname'></div>

<!-- change -->
<div>
  <form>
  <select class="target"> 
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option> 
  </select> 
  </form>   
</div>
<div id="other"> Trigger the handler </div>

<div class="keydown">keydown : <input type='text' name='email'></div>
<div class="keyup">keyup : <input type='text' name='email'></div>

<p class="cont01">마우스 클릭클릭!</p>

<div id="cont02"> Outer 
  <span id="inner"> Inner </span> 
</div>
<div id="log"></div>

<div class="cont03">resize~~</div>

<div>
  <div>scroll</div> 
  <p class="cont04">안녕 - <span>하세요!</span></p>
</div>
<br>


<select name="garden" multiple="multiple" id="cont05"> 
  <option>Flowers</option>
  <option selected="selected">Shrubs</option> 
  <option>Trees</option>
  <option selected="selected">Bushes</option> 
  <option>Grass</option>
  <option>Dirt</option> 
</select>  
<div style="color:red"></div>

CSS

.cu_m_sec_b_guide ul {width:700px}
.cu_m_sec_b_guide ul li {float:left; width:100px; height:77px; text-align:center;list-style-type:none;margin-bottom:20px; background:url(http://www.cuchen.com/images/main/cu_m_sec_guide1.gif) center 0 no-repeat;}
/* .cu_m_sec_b_guide ul li:after{content:"";display:block;clear:both} */
.cu_m_sec_b_guide ul li:nth-child(1) {}
.cu_m_sec_b_guide ul li:nth-child(2) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide2.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(3) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide3.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(4) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide4.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(5) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide5.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(6) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide6.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li a {display:block; width:126px; height:28px; padding-top:49px; font-size:12px; color:#000;text-decoration:none}

.cu_m_sec_b_guide{float:left;margin:10px 0}
.cu_m_sec_b_guide:after{content:"";display:block;clear:both}


.cont03{width:500px;height:300px;background-color:pink}
.on{background-color:red}

JavaScript

$(document).ready(function(){

	$('input').focus(function(){
		$(this).css('background-color','#cccccc');
	});  
  
  $('input').blur(function(){
  	$(this).css('background-color','#FFFF99');
  });  
  
  $('.target').change(function() { 
 	 alert('change!'); 	
  });  
  
	$('#other').click(function() { 
 	 $('.target').change();
  });
  
  $('.item01').dblclick(function(){
  	$('.item01 > a').css('color','red');  
  });
 
  $(".item02").hover( function () {
    $(this).append($("<span>까꿍</span>")); 
   	 }, function(){ 
    $(this).find("span:last").remove(); 
  }); 

	$('.keydown').keydown(function(){ 
  	alert('keydown!'); 
  });
  
  $('.keyup').keyup(function(){ 
  	alert('keyup!'); 
  });
  
  $(".cont01").mouseup(function(){ 
    $(this).append('<span style="color:red;">Mouse up.</span>'); 
    	}).mousedown(function(){ 
    $(this).append('<span style="color:blue;">Mouse down.</span>'); 
  });
/*
  $('#cont02').mouseenter(function() { 
  	$('#log').append('<span>mouseenter </span>'); 
  });
  
  $('#cont02').mouseleave(function() { 
 	 $('#log').append('<span>mouseleave </span>');
  });

  $('#cont02').mouseout(function() { 
  	$('#log').append('<span>mouseout </span>'); 
  });
*/

  $(window).resize(function (){
    var height = window.outerHeight;
    if (height <= 1000) {
      $('.cont03').addClass('on');
    }
    else if(height >= 1000){
      $('.cont03').removeClass('on');
    }
  })
  
 		//clone함수는 일치하는 요소 집합의 깊은 복사(deep copy)를 합니다.
  $("p.cont04").clone().appendTo(document.body);   
  $("p.cont04").clone().appendTo(document.body); 
  $("p.cont04").clone().appendTo(document.body); 
  $(window).scroll(function () { 
    $(".cont04 > span").css("display", "inline").fadeOut("slow");
  });