jQuery事件blur()方法的使用实例讲解
实例
当输入域失去焦点 (blur) 时改变其颜色：
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>
定义和用法
当元素失去焦点时发生 blur 事件。
blur()函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。
提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。
触发 blur 事件
触发被选元素的 blur 事件。
语法
$(selector).blur()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
$("#btn1").click(function(){
$("input").focus();
});
$("#btn2").click(function(){
$("input").blur();
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对小牛知识库的支持。如果你想了解更多相关内容请查看下面相关链接
-
本文向大家介绍JavaScript事件方法(实例讲解)，包括了JavaScript事件方法(实例讲解)的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接上代码 以上这篇JavaScript事件方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jquery事件preventDefault()方法用法实例，包括了jquery事件preventDefault()方法用法实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery事件preventDefault()方法用法。分享给大家供大家参考。具体实现方法如下： 补充说明： （1）如果想获取事件的相关信息，则给匿名函数添加一个参数。例子中的e表示事件的对象。 （2
-
本文向大家介绍jQuery之动画ajax事件(实例讲解)，包括了jQuery之动画ajax事件(实例讲解)的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接上代码 以上这篇jQuery之动画ajax事件(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍zTree jQuery 树插件的使用(实例讲解)，包括了zTree jQuery 树插件的使用(实例讲解)的使用技巧和注意事项，需要的朋友参考一下 分享说明： 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分
-
本文向大家介绍实例讲解Android中ContentProvider组件的使用方法，包括了实例讲解Android中ContentProvider组件的使用方法的使用技巧和注意事项，需要的朋友参考一下 ContentProvider基本使用 为了在应用程序之间交换数据，android提供了ContentProvider，ContentProvider是不同应用程序之间进行数据交换的标准API，当一个
-
本文向大家介绍jquery实现回车键触发事件(实例讲解)，包括了jquery实现回车键触发事件(实例讲解)的使用技巧和注意事项，需要的朋友参考一下 键盘事件有3： keydown，keypress，keyup，分别是按下，按着没上抬，上抬键盘 。 正确代码为： 推荐：keyup，防止笔记本键盘不小心触摸到了 1.有些文档中有写成这样： XP系统IE6下是不成功的。 2.还有INPUT的 这种情况要