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实现图片轮播器
May 23 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 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存储过程
2007/02/14 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
js 文本滚动效果的实例代码
2013/08/17 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python正则表达式知识汇总
2017/09/22 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Django models filter筛选条件详解
2020/03/16 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
用python批量下载apk
2020/12/29 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
求职信需要的五点内容
2014/02/01 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
高中课程设置方案
2014/05/28 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
运动会加油稿50字
2015/07/21 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
教师旷工检讨书
2015/08/15 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书