événements jQuery

Qu'est-ce qu'un événement ?

La réponse de la page aux différents visiteurs s'appelle un événement.

Les gestionnaires d'événements font référence à des méthodes appelées lorsque certains événements se produisent en HTML.

Exemple :

Déplacez la souris sur l'élément.
Sélectionner le bouton radio
Cliquer sur l'élément

Le terme « déclencheur » est souvent utilisé dans events "(ou "fire") Par exemple : "L'événement keypress se déclenche lorsque vous appuyez sur une touche."

Événements DOM courants :

事件	说明
click	鼠标点击时触发此事件
keypress	键盘上的键被按下再次释放时触发
submit	表单被提交时触发
load	页面加载完触发
dblclick	鼠标双击是触发
keydown	键盘上的键被按下时触发
change	当前元素失去焦点并且元素内容发生改变时触发
resize	浏览器窗口大小被改变时触发
mouseenter	添加/触发 mouseenter 事件
keyup	键盘上的键被按下后松开时触发
focus	当某个元素失去焦点时触发
scroll	添加/触发 scroll 事件
mouseleave	添加/触发 mouseleave 事件
blur	添加/触发 blur 事件

Syntaxe de la méthode d'événement jQuery

Dans jQuery, la plupart des événements DOM ont une méthode jQuery équivalente.

Spécifiez un événement de clic sur la page :

$("p").click();

L'étape suivante consiste à définir quand pour déclencher l'événement. Vous pouvez y parvenir grâce à une fonction événementielle :

$("p").click(function(){
// Code exécuté après le déclenchement de l'action !!
}) ;

Méthodes d'événements jQuery couramment utilisées

$(document).ready()

La méthode $(document).ready() nous permet d'exécuter une fonction une fois le document complètement chargé. Cette méthode événementielle a été mentionnée dans le chapitre Syntaxe de jQuery. La méthode

click()

click() est une fonction qui est appelée lorsque l'événement de clic sur le bouton est déclenché.

Cette fonction est exécutée lorsque l'utilisateur clique sur l'élément HTML.

Dans l'exemple ci-dessous, lorsqu'un événement click est déclenché sur un élément <p>, l'élément <p> actuel est masqué :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
   
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>

Exécutez le programme pour l'essayer

dblclick()

Lorsqu'un élément est double-cliqué, l'événement dblclick se produit.

La méthode dblclick() déclenche l'événement dblclick ou spécifie une fonction à exécuter lorsqu'un événement dblclick se produit :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>

Exécutez le programme pour l'essayer

mouseenter()

L'événement mouseenter se produit lorsque le pointeur de la souris passe à travers un élément.

La méthode mouseenter() déclenche l'événement mouseenter, ou spécifie une fonction à exécuter lorsqu'un événement mouseenter se produit :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("您的鼠标移到了 id=p1 的元素上!");
  });
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>

Exécutez le programme pour l'essayer

mousedown()

L'événement mousedown se produit lorsque le pointeur de la souris se déplace sur un élément et que le bouton de la souris est enfoncé.

La méthode mousedown() déclenche l'événement mousedown, ou spécifie la fonction à exécuter lorsque l'événement mousedown se produit :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>

Exécutez le programme pour l'essayer

<🎜 La méthode >

hover()

hover() est utilisée pour simuler les événements de survol du curseur.

Lorsque la souris se déplace sur l'élément, la première fonction spécifiée (mouseenter) sera déclenchée ; lorsque la souris sortira de l'élément, la deuxième fonction spécifiée (mouseleave) sera déclenchée.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("你进入了 p1!");
    },
    function(){
    alert("拜拜! 现在你离开了 p1!");
  }); 
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>

Exécutez le programme et essayez-le

focus()

L'événement focus se produit lorsqu'un élément obtient le focus.

Lorsqu'un élément est sélectionné avec un clic de souris ou positionné avec la touche de tabulation, l'élément obtient le focus.

La méthode focus() déclenche l'événement focus, ou spécifie la fonction à exécuter lorsque l'événement focus se produit :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("input").focus(function(){
                $(this).css("background-color","#cccccc");
            });
            $("input").blur(function(){
                $(this).css("background-color","#ffffff");
            });
        });
    </script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

Exécutez le programme et essayez-le

Si vous êtes intéressé, vous pouvez l'essayer. Autres événements

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("您的鼠标移到了 id=p1 的元素上!"); }); }); </script> </head> <body> <p id="p1">鼠标指针进入此处，会看到弹窗。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

événements jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]