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 相关文章推荐
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
生成二维码方法汇总
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动态生成VRML网页
2006/10/09 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP多文件上传实例
2015/07/09 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JavaScript中this详解
2015/09/01 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
教师师德师风个人整改方案
2014/09/18 职场文书
悬空寺导游词
2015/02/05 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers