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 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
JS 表单验证大全
2011/11/23 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
Ionic快速安装教程
2016/06/03 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
法人身份证明书
2014/10/08 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
Flink 侧流输出源码示例解析
2022/09/23 Servers