jQuery中focus事件用法实例


Posted in Javascript onDecember 26, 2014

本文实例讲述了jQuery中focus事件用法。分享给大家供大家参考。具体分析如下:

当元素获得焦点或者调用focus()方法时候会触发focus事件。

一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序。
可以通过focus()方法为focus事件绑定事件处理程序。例如:

$("input").focus(function(){$(this).css("backgroundColor","red")})

以上代码就是将function函数作为事件处理程序通过focus()方法绑定到focus事件。当触发focus事件的时候,就会调此函数。
实例代码:
<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>focus事件-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("input").focus(function(){

    $(this).css("backgroundColor","red")

  }) 

})  

</script> 

</head> 

<body> 

<div> 

<ul> 

  <li>用户名:<input type="text" name="username" /></li> 

  <li>密码:<input type="password" name="userpassword" /></li> 

</ul> 

</div> 

</body> 

</html>

以上代码可以为input元素注册focus事件处理函数,当获得焦点的时候能够设置文本框的背景色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery中filter方法用法实例分析
Feb 06 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
用JS实现选项卡
Mar 23 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
生成二维码方法汇总
Dec 26 #Javascript
Javascript中的五种数据类型详解
Dec 26 #Javascript
javascript工厂方式定义对象
Dec 26 #Javascript
jQuery中click事件用法实例
Dec 26 #Javascript
javascript实现类似超链接的效果
Dec 26 #Javascript
浅析javascript操作 cookie对象
Dec 26 #Javascript
浅谈javascript对象模型和function对象
Dec 26 #Javascript
You might like
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Javascript this指针
2009/07/30 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
基于python 字符编码的理解
2017/09/02 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python批量创建指定名称的文件夹
2019/03/21 Python
详解python中@的用法
2019/03/27 Python
python实现AES加密与解密
2019/03/28 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
写给老婆的检讨书
2014/02/21 职场文书
公证书样本
2014/04/10 职场文书
软件项目开发计划书
2014/05/01 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
实施意见格式范本
2015/06/05 职场文书
道士塔读书笔记
2015/06/30 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
css3 选择器
2022/05/11 HTML / CSS