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 ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现手风琴特效
Jan 11 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python实现简单中文词频统计示例
2017/11/08 Python
python主线程捕获子线程的方法
2018/06/17 Python
实例详解Python模块decimal
2019/06/26 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
goland 恢复已更改文件的操作
2021/04/28 Golang
nginx常用配置conf的示例代码详解
2022/03/21 Servers