jQuery 事件中 bind 方法和blur() 方法
来源：互联网 发布：html登录注册界面源码 编辑：程序博客网 时间：2024/05/21 06:11
1.bind 方法
定义和用法
bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
自jq版本1.7起，on()方法是被选中元素添加事件处理程序的首选方法
语法
由空格分隔多个事件值。必须是有效的事件。data可选。规定传递到函数的额外数据。function必需。规定当事件发生时运行的函数。map规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
例1、给<p>标签添加一个单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给<p>标签添加一个单击事件</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("这个段落被点击了。");
});
});
</head>
<body>
<p>点我！</p>
</body>
</html>
例2、向元素添加多个事件。（添加多个事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>向元素添加多个事件</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").bind("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<p>将鼠标移动到该段落上。</p>
</body>
</html>
注意：toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。如果不存在指定的类则添加类，如果已设置则删除之。
例3、使用事件映射来向被选元素添加一些事件/函数（使用事件映射）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件映射来向被选元素添加一些事件/函数</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","#E9E9E4");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我！</button>
</body>
</html>
例4、向一个自定义命名的事件处理程序传递数据。（向函数传递数据）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>向一个自定义命名的事件处理程序传递数据</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function handlerName(e)
{
alert(e.data.msg);
}
$(document).ready(function(){
$("p").bind("click", {msg: "你刚点击了!"}, handlerName)
});
</script>
</head>
<body>
<p>点我！</p>
</body>
</html>
2、blur()方法
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。
提示：该方法常与 focus() 方法一起使用。
语法
为被选元素触发 blur 事件：
添加函数到 blur 事件：
例1、添加函数到blur事件，当input字段失去焦点时发生blur事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加函数到blur事件</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").blur(function(){
alert("输入框失去了焦点");
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
<p>在输入框写些东西，然后点击输入框外，让其失去焦点。</p>
</body>
</html>
例2、填写表单时需要实现如下效果
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>鼠标点击后无文字，挪开鼠标后有文字</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
/*进入焦点时触发*/
$("#account").focus(function(){
varoldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("");
}
});
/*失去焦点时触发*/
$("#account").blur(function(){
alert("12");
varoldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
});
</script>
</head>
<body>
帐号：<input id="account"name="account" type="text" value="请输入帐号">
</body>
</html>
- jQuery 事件中 bind 方法和blur() 方法
- jQuery 事件 - blur() 方法
- 【jQuery】事件- blur() 方法
- jQuery 事件 - blur() 方法
- jQuery 事件 - bind() 方法
- jquery事件bind方法
- jquery事件--bind()方法
- Jquery 事件绑定--.bind() 方法
- jQuery中事件绑定bind、live、delegate、on方法
- 关于 jquery bind()方法中不能绑定hover事件
- js、jquery 中 blur事件和click事件冲突
- 【jquery】input 和 blur 事件
- jQuery focus和blur事件
- jQuery focus和blur事件
- jQuery Mobile bind()方法---处理自定义事件
- bind方法绑定多个jquery事件
- jQuery中blur和focus事件的应用
- jQuery中blur和focus事件的应用
- 如何在两个不同的vim文件之间进行复制粘贴
- 线性表—顺序表-创建线性表的实现
- ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
- PAT甲级1004CountingLeaves
- Java使用DOM解析XML的文件属性名和属性值、节点名和节点值
- jQuery 事件中 bind 方法和blur() 方法
- 51nod_1081 子段求和
- LintCode 40 用栈实现队列
- curator中监听器的实现
- poj 2369 Permutations (置换群入门)
- 《城市交通大数据》读书总结
- LeetCode-algorithms 47. Permutations II
- 简单迷宫算法实现
- 数据库常用命令
