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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
项目合作计划书
2014/01/09 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
小学优秀班主任材料
2014/12/17 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL