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 Event学习第五章 高级事件注册模型
Feb 07 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
原生JS进行前后端同构
Apr 22 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表单转换textarea换行符的方法
2010/09/10 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
php单例模式示例分享
2015/02/12 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python字符串Intern机制详解
2019/07/01 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
EJB timer的种类
2014/10/28 面试题
大学生职业规划论文
2014/01/11 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
故宫英文导游词
2015/01/31 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
离婚起诉状范本
2015/05/19 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python