1.bind 方法
定义和用法
bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
自jq版本1.7起,on()方法是被选中元素添加事件处理程序的首选方法
语法
参数 | 描述 |
---|---|
event | 必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 |
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 事件:
参数 | 描述 |
---|---|
function | 可选。规定当 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>