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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
解析左右值无限分类的实现算法
2013/06/20 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php实现留言板功能
2017/03/05 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
JavaScript 学习技巧
2010/02/17 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
js实现右键菜单功能
2016/11/28 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python写入已存在的excel数据实例
2018/05/03 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python列表推导式操作解析
2019/11/26 Python
python二元表达式用法
2019/12/04 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python中return不返回值的问题解析
2020/07/22 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
2014年情人节活动方案
2014/02/16 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Go timer如何调度
2021/06/09 Golang
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js