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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery-App输入框实现实时搜索
Nov 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 MySQL与分页效率
2008/06/04 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
python命令行参数sys.argv使用示例
2014/01/28 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Oracle快照(snapshot)
2015/03/13 面试题
校园之声广播稿
2014/01/31 职场文书
索桥的故事教学反思
2014/02/06 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
业务内勤岗位职责
2014/04/30 职场文书
工会换届选举方案
2014/05/21 职场文书
师德模范事迹材料
2014/06/03 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
大学同学聚会感言
2015/07/30 职场文书