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 remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现日历效果
Sep 11 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
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
js装饰设计模式学习心得
2018/02/17 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python3中rank函数的用法
2019/11/27 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python logging模块的使用
2020/09/07 Python
群胜软件Java笔试题
2012/09/29 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
企业安全生产目标责任书
2014/07/23 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
开除通知书范本
2015/04/25 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
详解Redis复制原理
2021/06/04 Redis
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python