jQuery事件blur()方法的使用实例讲解


Posted in jQuery onMarch 30, 2019

实例

当输入域失去焦点 (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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JQueryDOM之样式操作
Mar 27 #jQuery
浅谈JS和jQuery的区别
Mar 27 #jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
You might like
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP基础知识介绍
2013/09/17 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP实现验证码校验功能
2017/11/16 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
使用Python写CUDA程序的方法
2017/03/27 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
pygame实现简易飞机大战
2018/09/11 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
农村婚礼证婚词
2014/01/10 职场文书
迎新晚会主持词
2014/03/24 职场文书
工作会议方案
2014/05/21 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
招商银行工作证明
2015/06/17 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android