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 相关文章推荐
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
AngularJs表单验证实例详解
May 30 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
解决layui表格的表头不滚动的问题
Sep 04 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
生成二维码方法汇总
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的图形函数中显示汉字
2006/10/09 PHP
PHP语法速查表
2006/12/06 PHP
php实现mysql封装类示例
2014/05/07 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
python实现井字棋游戏
2020/03/30 Python
python3.6数独问题的解决
2019/01/21 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
什么是python的函数体
2020/06/19 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
英文自荐信
2013/12/15 职场文书
初中体育教学反思
2014/01/14 职场文书
中学生运动会入场词
2014/02/12 职场文书
工作时间调整通知
2015/04/24 职场文书
薪资证明范本
2015/06/19 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Python anaconda安装库命令详解
2021/10/16 Python