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 相关文章推荐
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
纯js实现动态时间显示
Sep 07 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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
世界收音机发展史
2021/03/01 无线电
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python使用配置文件过程详解
2019/12/28 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
个人自荐材料
2014/05/23 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
龙猫观后感
2015/06/09 职场文书
关于python中模块和重载的问题
2021/11/02 Python