[jQuery] event, effect 설정

*event

 - click : 모든 태그에 적용할 수 있다.

  문법)

  

  $(“selector”).click(function(){

    //클릭 이벤트가 발생했을 때 사용자에게 제공할 코드.

  });

 

 - change : <select>, 키 입력이 가능한 HTML Form Control

   $(“selector”).change(function(){

      //change 이벤트가 발생했을 때 사용자에게 제공할 코드.

    });

 - focusin : 키 입력이 가능한  HTML Form Control

    : 커서를 가졌을 때

  

  문법)

    $(“selector”).focusin(function(){

       커서를 가졌을 때 사용자에게 제공할 코드

     });

  -focusout : 키 입력이 가능한 HTML Form Control

    : 커서가 빠져 나갔을 때

    $(“selector”).focusout(function(){

       커서가 빠져나갔을 때 사용자에게 제공할 코드

     });

 

*blur : 키 입력이 가능한 HTML Form Control.

  -커서가 빠져 나갔을 때

 $(“selector”).blur(function(){

   //커서가 빠져 나갔을 때 사용자에게 제공할 코드.

  });

-keydown키 입력이 가능한 HTML Form Control

   키가 눌렸을 때 :

  $(“selector”).keydown(function( evt ){

    //키가 눌렸을 때 사용자에게 제공할 코드.

     evt.which // evt.keyCode

  });

-keyup키 입력이 가능한 HTML Form Control

   눌린 키가 올라올 때 :

  $(“selector”).keyup(function( evt ){

    //키가 올라올 때 사용자에게 제공할 코드.

     evt.which

  });

 

-mouseover : 마우스 포인터가 특정 영역에 들어갔을 때.

  $(“selector”).mouseover( function(){

   //마우스 포인터가 특정 영역에 들어갔을 때 사용자에게 제공할 코드.

  });

-mouseout : 마우스 포인터가 특정 영역을 빠져나갔을 때.

  $(“selector”).mouseout(function(){

   //마우스포인터가 특정영역을 빠져 나갔을 때 사용자에게 제공할 코드.

  });


 

*effect

 - 효과를 설정할 때 사용.

 -특정 대상을 숨기기

   $(“selector”).hide();

 -특정대상을 보이기

   $(“selector”).show();

 -상태반전 ( 보이는 상태 <-> 숨김상태,)

   $(“selector”).toggle();

 

*서서히 보이거나 숨기기

 - 서서히 보이기

  $(“selector”).fadeIn(ms)

  $(“selector”).fadeIn(ms,function(){

         보이기가 완료된 후 사용자에게 제공할 코드;

    });

 - 서서히  숨기기

  $(“selector”).fadeOut(ms)

  $(“selector”).fadeOut(ms,function(){

           숨기기가 완료된 후 사용자에게 제공할 코드;

    });

 - 서서히  숨기거나 보여지는 상태 반전.

  $(“selector”).fadeToggle(ms)

  $(“selector”). fadeToggle(ms,function(){

           반전 완료된 후 사용자에게 제공할 코드;

    });

 

*펼쳐 보이기, 말아올리기

 - 펼쳐 보이기

  $(“selector”).slideDown(ms)

  $(“selector”). slideDown(ms,function(){

         보이기가 완료된 후 사용자에게 제공할 코드;

    });

 - 말아 올리기

  $(“selector”).slideUp(ms)

  $(“selector”). slideUp(ms,function(){

          펼쳐보이기가 완료된 후 사용자에게 제공할 코드;

    });

 -  상태 반전.

  $(“selector”).slideToggle(ms)

  $(“selector”). slideToggle(ms,function(){

           반전 완료된 후 사용자에게 제공할 코드;

    });

'jQeury' 카테고리의 다른 글

[jQuery] Form Control 값 설정, 얻기  (0) 2025.04.24