é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 » (ou « feu ») est souvent utilisé dans des événements tels que : "une pression sur une touche se déclenche lorsque vous appuyez sur la touche événement".
Événements DOM courants :
Événement de souris, cliquez sur dblclick mouseenter mouseleave
keypress keydown keyup Blur
événement de formulaire soumettre changement focus décharger
événement de document/fenêtre charger redimensionner défilement
événement jQuery Syntaxe de la méthode
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énement jQuery couramment utilisées
$(document).ready()
La méthode $(document).ready() nous permet de charger le document une fois qu'il est complètement chargé, exécutez la fonction. 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 suivant, 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>dblclick()
Quand Quand 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 lorsque l'é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>mouseenter()
Lorsque le pointeur de la souris passe par l'élément, ce sera un événement mouseenter qui s'est produit. La méthode
mouseenter() déclenche l'événement mouseenter, ou spécifie la fonction à exécuter lorsque l'é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>mouseleave()
Lorsque le pointeur de la souris quitte un élément, l'événement mouseleave se produit. La méthode
mouseleave() déclenche l'événement mouseleave, ou spécifie une fonction à exécuter lorsque l'événement mouseleave 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").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>mousedown()
Lorsque le pointeur de la souris se déplace l'élément, et L'événement mousedown se produit lorsque le bouton de la souris est enfoncé. La méthode
mousedown() déclenche l'événement mousedown, ou spécifie une 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>mouseup()
Lorsque le bouton de la souris est relâché sur l'élément, l'événement mouseup se produira. La méthode
mouseup() déclenche l'événement mouseup, ou spécifie la fonction à exécuter lorsque l'événement mouseup 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").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>hover()
hover() Méthode 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>focus()
Lorsqu'un élément obtient le focus, l'événement focus se produit.
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><br>
Email: <input type="text" name="email">
</body>
</html>blur()
Lorsque l'élément est perdu Une fois la mise au point, l'événement de flou se produit. La méthode
blur() déclenche l'événement de flou ou spécifie une fonction à exécuter lorsqu'un événement de flou 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>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
