`
axl234
  • 浏览: 268911 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 的focusin和focusout方法的使用

阅读更多
focusin(fn)
概述
在每一个匹配元素的focusin事件中绑定一个处理函数。

当一个元素,或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

参数
fnFunction在每一个匹配元素的focusin事件中绑定的处理函数。

示例
描述:
获得焦点后会触发动画:

HTML 代码:
<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>jQuery 代码:
$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

focusout(fn)
概述
在每一个匹配元素的focusout事件中绑定一个处理函数。

当一个元素,或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

参数
fnFunction在每一个匹配元素的focusout事件中绑定的处理函数。

示例
描述:
失去焦点后会触发动画:

HTML 代码:
<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>jQuery 代码:
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});
分享到:
评论

相关推荐

    Jquery.validate插件使用方法

    1. **引入资源**:在项目中,首先需要引入jQuery库和jQuery.validate插件的js文件,通常包括`jquery.js`、`jquery.validate.js`以及可选的`additional-methods.js`(包含了一些额外的验证方法)。 2. **初始化验证*...

    JQuery的ON()方法支持的所有事件罗列

    自从jQuery添加了on()和off()方法之后,基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。 不过jQuery的api里面没有说on里面到底可以绑定多少个事件,今天看jQuery1.8.3的源码...

    JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法。分享给大家供大家参考。具体分析如下: ...这类类型可以包括如下:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown,

    w3school jQuery参考手册 飞龙整理 20141002

    - 更多事件方法包括`focus()`, `focusin()`, `focusout()`, `mousedown()`, `mouseup()`, `mousemove()`, `mouseover()`, `mouseout()`, `keydown()`, `keyup()`, `keypress()`等。 jQuery 还支持事件委托,通过`...

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    jquery常用方法及使用示例汇总

    ### jQuery常用方法及使用示例汇总 jQuery是一个快速、小巧、功能强大的JavaScript库,它封装了JavaScript常见的操作,使得Web开发者可以更...掌握这些方法对于熟练使用jQuery来处理DOM、事件和动画等任务至关重要。

    jQuery()方法的第二个参数详解

    同时,我们还定义了两个事件处理器(focusin和focusout),当输入框获得或失去焦点时,会通过addClass和removeClass方法添加或移除一个"active"的class。通过appendTo方法,这个新创建的input元素被添加到页面的form...

    JQuery参考手册.doc

    10. **focusin()** 和 **focusout()**: 分别在元素获得或失去焦点时触发。 11. **keydown()**, **keyup()** 和 **keypress()**: 用于键盘事件处理。 12. **load()**: 触发或绑定load事件,通常用于元素加载完成时。 ...

    基于Jquery的动态创建DOM元素的代码

    值得注意的是,这里我们使用的focusin和focusout事件是JQuery封装的事件,它们与JavaScript原生的focus和blur事件类似,但在事件冒泡处理上有所不同。JQuery通过封装这些事件为开发者提供了更好的浏览器兼容性和更...

    jquery live()重复绑定的解决方法介绍

    例如,在jQuery 1.4.1版本中,live()方法还支持focus和blur事件(这些事件被映射到更合适的、可以冒泡的focusin和focusout事件)。此外,在该版本中还能支持hover事件(映射到"mouseenter"和"mouseleave"事件)。在...

    jquery常用效果笔记

    使用jQuery插件tablesorter可以轻松实现表格的列排序功能。只需在表格元素上调用`tablesorter()`方法即可,可以通过传入参数自定义排序规则,如禁用某列的排序功能: ```javascript $(document).ready(function(){ ...

    jQuery 1.5 API 中文版

    $.blur,.mousedown,.change,.mouseenter,.click,.mouseleave,.dblclick,.mousemove,.error,.mouseout,.focus,.mouseover,.focusin,.mouseup,.focusout,.resize,.keydown,.scroll,.keypress,.select,.keyup,.submit,....

    jquery基础 选择器 事件

    8. **状态变化事件**:`$(selector).focusin(function)` 和 `$(selector).focusout(function)` 当元素获得或失去焦点时触发,`$(selector).mouseover(function)` 和 `$(selector).mouseout(function)` 当鼠标进入或...

    jQuery表单事件实例代码分享

    除了`.focusin()`和`.blur()`方法,jQuery还提供了`.focus()`、`.focusout()`、`.change()`、`.submit()`、`.click()`等多种事件方法,可以用于捕捉不同类型的用户操作。 例如,`.change()`方法可以用来捕捉文本...

    jQuery对象属性.docx

    通过理解和熟练使用这些选择器和方法,开发者可以高效地操作DOM、实现动态效果和交互功能,提升web应用的用户体验。学习和掌握jQuery,能极大地提高前端开发效率,尤其对于初学者来说,是迈进前端开发的重要一步。

    JQuery中使文本框获得焦点的方法实例分析

    在添加事件监听时,也可以直接使用`.focusin()`和`.focusout()`来分别替代`.focus()`和`.blur()`方法,这样可以捕捉到元素聚焦以及失去焦点的事件,包括其子元素。 还有一点需要注意,无论使用原生JavaScript还是...

    jQuery中.live()方法的用法深入解析

    在jQuery 1.4.1版本中,引入了 `focusin` 和 `focusout` 事件,它们是 `focus` 和 `blur` 事件的可冒泡版本,使得这些事件也可以使用 `live()` 方法。 总结来说,`live()` 方法在早期版本的jQuery中是处理动态内容...

Global site tag (gtag.js) - Google Analytics