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实现图片上传前本地预览
Apr 28 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery实现评论模块
Aug 19 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
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
从vue源码看props的用法
2019/01/09 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
班组长工作职责
2013/12/25 职场文书
总经理助理的职责
2014/03/14 职场文书
片区教研活动总结
2014/07/02 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
python单元测试之pytest的使用
2021/06/07 Python