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插件写法笔记整理
Sep 06 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
js document.write()使用介绍
Feb 21 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
SONY SRF-40W电路分析
2021/03/02 无线电
php sybase_fetch_array使用方法
2014/04/15 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
JQuery中extend的用法实例分析
2015/02/08 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
vue v-model的用法解析
2020/10/19 Javascript
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python 含参构造函数实例详解
2017/05/25 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python如何生成树形图案
2018/01/03 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
公司开业庆典策划方案
2014/06/04 职场文书
停车场管理制度范本
2015/08/05 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技