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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
js实现弹幕飞机效果
Aug 27 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仿discuz分页效果代码
2008/10/02 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
python如何保存文本文件
2020/06/07 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
精彩的广告词
2014/03/19 职场文书
安全隐患整改报告
2014/11/06 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
导游词之井冈山
2019/11/20 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技