HI,欢迎您光临Downzz,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!
当前位置:首页 > 站长教程 > 建站经验 > jQuery教程 > jQuery的bind()方法用法详解_jQuery实例

jQuery的bind()方法用法详解_jQuery实例

时间:2019-10-28人气:600来源:Downzz我要评论(0)
此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用。

语法格式:

$(selector).bind(type,[data],function(eventObject))

此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>bind()-Downzz.com</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("Downzz.com")})  
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

以上代码中,当点击按钮的时候,会将div元素中的文本设置“Downzz.com”。

从bind()方法的语法结构中可以看到,还有一个可选的data参数可供使用,此参数可以作为event.data属性值,传递给事件对象的额外数据对象。

实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>bind()函数-Downzz.com</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="Downzz.com";
  $("#bt").bind("click",{"mytext":newtext},function(e){
    $("div").text(e.data.mytext);
  })  
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

以上代码利用data参数为事件处函数的事件对象提供额外的数据进行处理,同样达到了第一个实例的效果。

绑定多个事件:

可以使用链式编程的方式为匹配元素绑定多个事件。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>bind()函数-Downzz.com</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="Downzz.com";
  $("#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中的文本,当鼠标离开按钮的时候,会弹出文本框。

使浏览器默认事件失效

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>bind()函数-Downzz.com</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="http://www.downzz.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>

从以上代码可以看出,只要将函数的返回值设置为false,即可阻止默认事件的发生。

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 今日头条客户端提现步骤和条件详解_软件教程

    今日头条app怎么提现?今日头条新版上线了提现功能,很多用户不清楚怎么操作?没关系,下面是小编整理出来的相关问题解答,相信可以帮到大家。今日头条app提现步骤1、进入提现页面打开今日头条客户端,点击【我的】【作品管理】【数据】【提现】
  • 匹配磁力链接的正则表达式_正则实例

    本文分享一段正则表达式,实现了对磁力链接的匹配。代码实例如下:/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/上述代码实现了对于磁力链接的基本匹配效果,可以根据需要自行测试修改。

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号-4 | 浙公网安备 42011102000245号工信部

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!