Detailed explanation of jQuery's basic event binding function-JS Tutorial-php.cn

Detailed explanation of jQuery's basic event binding function

小云云

Release： 2017-12-26 17:26:45

Original

1517 people have browsed it

This article mainly introduces the event binding function implemented by jQuery. It analyzes the implementation and usage of jQuery event binding based on simple form verification examples. Friends who need it can refer to it. I hope it can help everyone.

The example in this article describes the event binding function implemented by jQuery. Share it with everyone for your reference, the details are as follows:

HTML text:

用户名：<input type="text" value="邮箱/用户名/手机号" id="login"/><br>
密　码：<input type="password" id="passwd"><br>
<input type="button" value="登陆" id="operation"/>

Copy after login

Javascript operation code:

//获取焦点事件
$("#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("验证失败");
}
});

Copy after login

Effect:

##Related recommendations:

Detailed explanation of javascript implementation of function binding and class event binding function in ES6

Detailed explanation of javascript event binding, triggering and deletion sample code

About event binding summary in Jquery

The above is the detailed content of Detailed explanation of jQuery's basic event binding function. For more information, please follow other related articles on the PHP Chinese website!