jQuery|focus焦点家族

简介: focus的家族中有三个成员成员focus:当 字段获得焦点时发生 focus 事件focusin:当 元素或其任意子元素获得焦点事件。focusout:当 元素或其任意子元素失去焦点事件。

focus的家族中有三个成员

成员

focus:当 <input> 字段获得焦点时发生 focus 事件
focusin:当 <div> 元素或其任意子元素获得焦点事件。
focusout:当 <div> 元素或其任意子元素失去焦点事件。

各自语法

$(selector).focus(function)
$(selector).focusin(function)
$(selector).focusout(function)

各自样例

focus

当 <input> 字段获得焦点时发生 focus 事件:
$("input").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});
尝试一下 »

focusin

当 <div> 元素或其任意子元素获得焦点时,设置 <div> 元素的背景颜色:
$("div").focusin(function(){
$(this).css("background-color","#FFFFCC");
});
尝试一下 »

focusout

当 <div> 元素或其任意子元素失去焦点时,设置 <div> 元素的背景颜色:
$("div").focusout(function(){
$(this).css("background-color","#FFFFFF");
});
尝试一下 »

目录
相关文章
|
JavaScript 前端开发 数据安全/隐私保护
|
前端开发 JavaScript
JQuery焦点Table
.prod_description_sizechart table{margin-bottom:0;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:0;} .
555 0
|
JavaScript 前端开发
当jQuery 1.7遇上focus方法
jQuery中有一个focus()方法能设置对象的焦点,在1.7以下的版本中,不管对象是不是disabed状态,这个方法都不会报错(只是当disabled时,设置焦点的代码无效),但在1.7版本中,如果对象是disabled状态,这时调用focus()方法时,会直接报异常: Error: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus. 意思是:不可见或不可用的元素无法获取焦点。
927 0
|
JavaScript 前端开发
|
JavaScript 前端开发 .NET
Jquery实现回车键Enter切换焦点
系统默认情况下,使用Tab按键切换页面元素的焦点,有没有想过回车键Enter也可以实现这种功能,并且具有良好的用户体验。接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过。
880 0
|
4月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
40 1
|
25天前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】