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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
分页栏的web标准实现
Nov 01 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
axios基本入门用法教程
Mar 25 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
js实现简单贪吃蛇游戏
May 15 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
javascript实现时钟动画
2020/12/03 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
对python 自定义协议的方法详解
2019/02/13 Python
python中的逆序遍历实例
2019/12/25 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
写好自荐信的技巧
2013/11/08 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
保密承诺书
2014/03/27 职场文书
骨干教师培训方案
2014/05/06 职场文书
化学工程专业求职信
2014/08/10 职场文书
大学生学习计划书
2014/09/15 职场文书
生活小常识广播稿
2015/08/19 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python