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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery插件开发模式实例详解
Jul 20 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将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python中列表和元组的区别
2017/12/18 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python有几个版本
2020/06/17 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
《新型玻璃》教学反思
2014/04/13 职场文书
理发店策划方案
2014/06/05 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python