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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP语法速查表
2006/12/06 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python封装原理与实现方法详解
2018/08/28 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python笔试面试题小结
2019/09/07 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
公司活动策划方案
2014/01/13 职场文书
股权收购意向书
2014/04/01 职场文书
如何写求职信
2014/05/24 职场文书
大学生就业自荐书
2014/06/16 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
婚礼答谢礼品
2015/01/20 职场文书
给学校的建议书400字
2015/09/14 职场文书