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卸载全部事件的思路详解
Apr 03 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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 数组实例说明
2008/08/18 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php中in_array函数用法探究
2014/11/25 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
PyMongo安装使用笔记
2015/04/27 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python实现多进程的四种方式
2019/02/22 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
运动会开幕式解说词
2014/02/05 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2015年工程师工作总结
2015/04/30 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS