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 相关文章推荐
一个JS的日期格式化算法示例
Jul 31 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
原生JS实现烟花效果
Mar 10 Javascript
js+canvas实现刮刮奖功能
Sep 13 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
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php支付宝APP支付功能
2020/07/29 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python适合人工智能的理由和优势
2019/06/28 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
使用Pycharm分段执行代码
2020/04/15 Python
python 深度学习中的4种激活函数
2020/09/18 Python
python中添加模块导入路径的方法
2021/02/03 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014年环境整治工作总结
2014/12/10 职场文书