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获取选中的文本的方法代码
Oct 30 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
js中的string.format函数代码
2020/08/11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python实现从wind导入数据
2019/12/03 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
机关门卫岗位职责
2013/12/30 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
委托证明模板
2014/09/16 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
springboot实现string转json json里面带数组
2022/06/16 Java/Android