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 相关文章推荐
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
php共享内存段示例分享
2014/01/20 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
js单例模式详解实例
2013/11/21 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
python函数超时自动退出的实操方法
2020/12/28 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
药品促销活动方案
2014/02/14 职场文书
产品发布会策划方案
2014/05/12 职场文书
医药销售自荐书
2014/05/29 职场文书
北京故宫的导游词
2015/01/31 职场文书
2015年工程师工作总结
2015/04/30 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers