BLOG ARTICLE hover | 1 ARTICLE FOUND

  1. 2012.02.25 [jQuery] 문법 모음 - 계속 업데이트


jQuery 선택자


예) 테이블중 첫번째 행에 체크박스중 체크된 놈 선택


$('#test tr td:nth-child(1) :checked')


자식, 즉 한단계(1 Depth) 아래 항목만 선택할때

$('#test > div') ; // div 하위의 div들은 선택되지 않는다.

 



페인드인, 페이드아웃, (fadeIn, fadeOut) - 페이드 효과

$('#test').fadeIn();

$('#test').fadeOut();

$('#test').fadeIn(3000); // 3초동안 fadeIn 이 수행됩니다.

$('#test').fadeIn('slow'); - fast, normal

$('#test').fadeOut('fast', function(){

alert("페이드아웃이 완료되고나면, 이 콜백 메소드가 실행됩니다.');



slideUp, slideDown, slideToggle - 슬라이드 효과

 $('#test').slideUp('fast'); 
 $('#test').slideDown('fast');  
 $('#test').slideToggle('fast', function(){ 
        alert("슬라이드 토글 이 완료된후 실행되는 콜백메소드");
}); 

 




mouseOver, mouseOut, hover -  마우스 오버, 마우스 아웃, 호버

   $('#celebs tbody tr').mouseover(function(){

            $(this).addClass('zebraHover');

  });
 

  $('#celebs tbody tr').mouseout(function(){

            $(this).removeClass('zebraHover');

  });


 
Hover !!! 

$('#celebs tbody tr').hover(function(){

    $(this).addClass('zebraHover');

  }, function(){

    $(this).removeClass('zebraHover');

  });


// 첫번째, 이벤트 핸들러는 마우스 오버일때 실행되는 메소드이고,
두번째 핸들러는 마우스아웃 이벤트를 처리하는 메소드다.



토글 클래스 팁


if( x == 1){

$(this).addClass('opened');

}else{

$(this).removeClass('opened');

}



위 코드를 토글클래스로 바꾸면


$(this).toggleClass('opened', x == 1);


 



YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST