Maison > interface Web > js tutoriel > Explication détaillée de la fonction de liaison d'événement de base de jQuery

Explication détaillée de la fonction de liaison d'événement de base de jQuery

小云云
Libérer: 2017-12-26 17:26:45
original
1573 Les gens l'ont consulté

Cet article présente principalement la fonction de liaison d'événements implémentée par jQuery. Il analyse la mise en œuvre et l'utilisation de la liaison d'événements jQuery sur la base d'exemples simples de vérification de formulaire. J'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit la fonction de liaison d'événement implémentée par jQuery. Partagez-le avec tout le monde pour votre référence, comme suit :

Texte HTML :


用户名:<input type="text" value="邮箱/用户名/手机号" id="login"/><br>
密 码:<input type="password" id="passwd"><br>
<input type="button" value="登陆" id="operation"/>
Copier après la connexion

Code d'opération Javascript :


//获取焦点事件
$("#login").focus(function(){
 var $realValue=$(this).val();
 var $defaultVale=this.defaultValue;
 if($realValue==$defaultVale){
  $(this).val("");
 }else{
  $(this).val($realValue);
 }
});
//失去焦点事件
$("#login").blur(function(){
 var $realValue=$(this).val();
 var $defaultVale=this.defaultValue;
 if($realValue==""){
  $(this).val($defaultVale);
 }else{
  $(this).val($realValue);
 }
});
//登陆绑定事件:实际项目中一般使用md5进行单向加密,然后传递后台验证身份
$("#operation").click(function(){
var $realValue=$("#login").val();
var $passwd=$("#passwd").val();
if($realValue=="squirrel"||$passwd=="xiaoyang"){
  alert("验证成功");
}else{
  alert("验证失败");
}
});
Copier après la connexion

Effet :

Recommandations associées :

Explication détaillée de l'implémentation JavaScript de la liaison de fonction et de la fonction de liaison d'événement de classe dans ES6

Explication détaillée de l'exemple de code de liaison, de déclenchement et de suppression d'événement JavaScript

À propos de la liaison d'événements dans 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal