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>

总结

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

赞 (0)

相关推荐

  • 简单易扩展可控性强的Jquery转盘抽奖程序

    简单易扩展可控性强的Jquery转盘抽奖程序

    基于Jquery的Javascript转盘抽奖程序,可以自定义抽奖界面,奖品数量.图片等,可控制中奖的奖品,抽奖转盘转动的速度和圈数. 在实际使用中,应当把概率放到后台程序中运算,以保证安全性和产生中奖奖品的可控性 Javascript代码: <script type="text/javascript"> var index = 1, //当前亮区位置 prevIndex = 14, //前一位置 Speed = 300, //初始速度 Time, //计时器 arr_le

  • jQuery实现动态添加和删除input框代码实例

    本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s

  • JQueryDOM之样式操作

    设置样式和获取样式 class 也是节点元素的属性,因此获取class 和设置class 都可以使用attr()方法来完成 追加样式 直接使用attr()方法设置class属性,会将原来的class属性替换掉 如果在添加新的样式时,还需要保留原有样式,可以使用addClass()方法 注意:当一个节点元素包含了多个class样式时,将按照以下方式进行处理: 如果给一个元素添加了多个 class 值, 那么就相当于合并了它们的样式 如果有不同的 class 设定了同一样式属性, 则后者覆盖前者 移

  • 使用jquery的cookie实现登录页记住用户名和密码的方法

    对于初学者来说,登录页记住用户名和密码的功能是经常会遇到的(通常会用javaee的api去实现),今天为大家介绍在前端页面直接用jquery实现该功能(比传统的方法简单多了),长话短说直接进入正题: 在项目中加入jquery.js和jquery.cookie.js两个依赖文件,并加入对应的页面中如: <script type="text/javascript" src="${BasePath}/static/assets/js/jquery.cookie.js"

  • 浅谈JS和jQuery的区别

    浅谈JS和jQuery的区别

    一.本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是一个JavaScript函数库.或者说是JavaScript. 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如: 库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,

  • jQuery实现动态添加和删除input框实例代码

    本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s

  • jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

    本文实例讲述了jQuery添加新内容的四个常用方法.分享给大家供大家参考,具体如下: 添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容 prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); //jQuery prepend() 方法在被选元素的开头插入内容. $(&q

  • Jquery的autocomplete插件用法及参数讲解

    var emails = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { name: "Master <em>Sync</em&g

  • 详解jQuery-each()方法

    详解jQuery-each()方法

    jquery中有隐式迭代,不需要我们再次对某些元素进行操作.但是如果涉及到不同元素有不同操作,需要进行each遍历.本文利用10个li设置不同的透明度的案例,对each方法进行说明. 语法: $(元素).each(function(index,element){ }); 参数index:表示元素索引,在本例中是0-9 参数element:表示对象,在本例中是每个li 案例效果: 代码如下 <!DOCTYPE html> <html> <head> <meta ch

  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    jQuery ajax仿Google自动提示SearchSuggess功能示例

    本文实例讲述了jQuery ajax仿Google自动提示SearchSuggess功能.分享给大家供大家参考,具体如下: 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

随机推荐