Detailed explanation of jQuery's basic event binding function

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"/>

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("验证失败");
}
});

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!