jQuery实现的事件绑定功能基本示例


Posted in jQuery onOctober 11, 2017

本文实例讲述了jQuery实现的事件绑定功能。分享给大家供大家参考,具体如下:

HTML正文:

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

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

效果:

jQuery实现的事件绑定功能基本示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
jQuery实现的form转json经典示例
Oct 10 #jQuery
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
You might like
实用函数9
2007/11/08 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
Postman参数化实现过程及原理解析
2020/08/13 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python实现简单http服务器
2018/04/12 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
机械个人求职信范文
2014/01/24 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
展览会邀请函
2015/02/02 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
react antd实现动态增减表单
2021/06/03 Javascript
Java tomcat手动配置servlet详解
2021/11/27 Java/Android