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 DOM 添加事件
Feb 14 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
Vue实现本地购物车功能
Dec 05 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
生成二维码方法汇总
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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
js获取ip和地区
2017/03/10 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python 字符串追加实例
2019/07/20 Python
pygame实现成语填空游戏
2019/10/29 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python中的测试框架
2020/11/13 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
国庆节演讲稿
2014/05/27 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
2015年林业工作总结
2015/05/14 职场文书
统招统分证明
2015/06/23 职场文书
亲戚关系证明
2015/06/24 职场文书