Quels sont les événements jquery ?

Événements jquery : 1. Événements de souris, y compris les événements de clic, de survol, etc. ; 2. Événements de clavier, y compris keydown, keyup, etc. ; 3. Événements de formulaire, y compris la mise au point, le flou et la perte de mise au point, etc. ; 4. Événements de liaison, événements de liaison de liaison ; 5. Événements composites, y compris les événements déclenchés par la méthode hover, les événements déclenchés par la méthode toggle(), etc.

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.4.1, ordinateur Dell G3.

Quels sont les événements jquery ?

Les événements jQuery sont une encapsulation d'événements JavaScript : les événements de souris, les événements de clavier, les événements de formulaire, les événements de liaison, les événements composés, etc.

1. méthode Comme suit

click() : événement de clic, déclenche ou lie la fonction à l'événement de clic de l'élément spécifié

mouseover() : déclenche ou lie la fonction à l'événement de survol de la souris de l'élément spécifié

mouseout() : trigger ou bind La fonction est liée à l'événement mouseout de l'élément spécifié

Exemple de code :

 $(function () {
            $("input").click(function () {
                $("li").mouseover(function () {
                    $(this).css("background", "green");
                }).mouseout(function () {
                    //this.style.background = "";
                    this.style.cssText = "background:";
                });
            });
        });

2 Événement clavier :

La méthode est la suivante :

keydown() : Lorsque la touche est enfoncée, déclencher ou lier la fonction à l'élément spécifié L'événement keydown

keyup() : L'événement keyup qui déclenche ou lie la fonction à l'élément spécifié lorsque la touche est relâchée

keypress() : L'événement keypress qui déclenche ou lie la fonction à l'élément spécifié lorsque des caractères imprimables sont générés

Exemple de code :

  $(function () {
        $("p input").keyup(function () {
            $("#events").append("keyup");
        }).keydown(function () {
            $("#events").append("keydown");
        }).keypress(function () {
            $("#events").append("keypress");
        });
        $(document).keydown(function (event) {
            if (event.keyCode == "13") {
                //按enter键
                alert("确认要提交么?");
            }
        });
    });

3. Événements de formulaire :

Les méthodes sont les suivantes :

focus() : Obtenir le focus, déclencher ou lier une fonction au focus événement de l'élément spécifié

blur() : perdre le focus, déclencher ou lier la fonction à l'événement de flou de l'élément spécifié

Exemple de code :

// 查询输入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("请输入要查询的问题"); 
  });

2,

 $(function () {
 //给文本框添加边框样式
     $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
    });
  });

4, événement de liaison :

Syntaxe analyse :

bind(type,[data],fn) , où les données ne sont pas requises

type : type d'événement, comprenant principalement des événements de base tels que le flou, le focus, le clic, la sortie de la souris, etc. De plus, cela peut également être un événement personnalisé

fn : fonction de traitement utilisée pour la liaison

Exemple de code :

Lier un,

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

Lier plusieurs,

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

Méthode Supprimer :

unbind([type],[fn]) est tout le contraire de l'événement de liaison. Si la méthode n'a pas de paramètres, cela signifie supprimer tous les événements

Si vous souhaitez supprimer plusieurs dissociations, ajoutez simplement un espace entre les deux

Exemple de code :

 $(function () {
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });

Remarque : lorsque unbind() ne prend aucun paramètre. paramètres, cela signifie supprimer tous les événements liés

5. Événement composite

Méthode hover()

Syntaxe : hover(enter,leave);

Cette méthode est équivalente à la combinaison des événements mouseover et mouseout;

Exemple de code :

$("li").hover(function() {
               $("li").css("background", "gray");
           }, function() {
               $("li").css("background", "green");
           });

méthode toggle()

La méthode toggle() est utilisée pour simuler des événements de clic de souris continus

Exemple de code :

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);

En même temps, la méthode toggle() a également une autre fonction : changer l'état visible de l'élément

$('input').toggle( 
  function () {
  $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  },
  function () {
   $('ul').toggle(); //是显示的则隐藏，是隐藏的则显示
  }
 );

Recommandation du didacticiel vidéo :

Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!