Home > Web Front-end > JS Tutorial > Detailed explanation of jQuery's basic event binding function

Detailed explanation of jQuery's basic event binding function

小云云
Release: 2017-12-26 17:26:45
Original
1603 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template