此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用。
语法格式:
   [ jQuery ] 运行代码    下载代码
<script>
$(selector).bind(type,[data],function(eventObject))\\
</script>
此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>bind()-51前端</title>
<style type="text/css">
div{
  width:150px;
  height:40px;
  background-color:blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").bind("click",function(){$("div").text("51前端")})  
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>
以上代码利用data参数为事件处函数的事件对象提供额外的数据进行处理,同样达到了第一个实例的效果。

绑定多个事件:

可以使用链式编程的方式为匹配元素绑定多个事件。代码如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>bind()函数-51前端</title>
<style type="text/css">
div{
  width:150px;
  height:40px;
  background-color:blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var newtext="蚂蚁部落";
  $("#bt").bind("click",{"mytext":newtext},function(e){
    $("div").text(e.data.mytext);
  }).bind("mouseout",function(){
    alert("欢迎下次光临");
  })  
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>
为按钮绑定了两个事件处理函数,当点击按钮的时候能够重新设置div中的文本,当鼠标离开按钮的时候,会弹出文本框。

使浏览器默认事件失效

例如点击链接跳转到一个指定的地址和点击提交按钮提交表单都是浏览器默认的事件。但是在实际操作过程中,这些默认事件并非我们想要的操作,例如早表单验证没有通过的时候,就不想提交表单。这个时候就需要阻止浏览器默认事件的发生。

代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>bind()函数-51前端</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(":submit").bind("click",function(){
    if($("#username").val()=="")
    {
      alert("用户名不能为空!");
      $("#username").focus();
      return false;
    }
    if($("#pw").val()=="")
    {
      alert("密码不能为空!");
      $("#pw").focus();
      return false;
    }
  })
})
</script>
</head>
<body>
<form action="https://www.51qianduan.com" name="myform">
<ul>
  <li>用户名:<input type="text" id="username" /></li>
  <li>密码:<input type="password" id="pw" /></li>
  <li><button>提交表单</button></li>
</ul>
</form>
</body>
</html>

代码描述:jQuery bind()方法。jQuery bind()方法简单介绍



119 159



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到