é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 grace à 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中文網(wǎng)(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中文網(wǎng)(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>雙擊鼠標(biāo)，我就消失。</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中文網(wǎng)(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("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進(jìn)入此處，會看到彈窗。</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中文網(wǎng)(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("再見，您的鼠標(biāo)離開了該段落。");
});
});
</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中文網(wǎng)(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("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落</p>
</body>
</html>mouseup()
Lorsque le bouton de la souris est relaché 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中文網(wǎng)(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("鼠標(biāo)在段落上松開。");
});
});
</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("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 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中文網(wǎng)(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中文網(wǎng)(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>
