jQuery的bind()方法使用详解

bind()方法用法详解:

此方法是使用比较频繁的方法之一，虽然在API手册上有着对方法的介绍，但是由于语言简短，例子不够详细，可能会造成不能够完全准确的掌握bind()方法的使用，下面就结合实例介绍一下此方法的使用。

语法格式:

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我们</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#bt").bind("click",function(){$("div").text("我们")})
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

以上代码中，当点击按钮的时候，会将div元素中的文本设置“我们”。

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

实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我们</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var newtext="我们";
 $("#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">
<title>我们</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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中的文本，当鼠标离开按钮的时候，会弹出文本框。

使浏览器默认事件失效

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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="" 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>

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • jQuery 常见开发使用技巧总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

  • 更高效的使用JQuery 这里总结了8个小技巧

    1.DOM遍历是昂贵的,将变量缓存起来. 复制代码 代码如下: //不推荐 var h = $('#ele').height(); $('#ele').css('height', h-20); 复制代码 代码如下: //推荐 var $ele = $('#ele'); var h = $ele.height(); $ele.css('height',h-20); 2.优化选择符. 复制代码 代码如下: //不推荐 $('div#myid') 复制代码 代码如下: //推荐 $('#myid')

  • jQuery on()方法使用技巧详解

    jQuery on()方法是官方推荐的绑定事件的一个方法. 复制代码 代码如下: $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. 复制代码 代码如下: bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on(

  • jQuery使用技巧简单汇总

    1.使用最新的jquery版本 觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了.建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本. 还有个建议是使用google的cdn上的jquery文件,加载速度更快.猛击Google Libraries API 进入查看. 复制代码 代码如下: <!-- Include a specific version of

  • jQuery unbind()方法实例详解

    jQuery unbind()方法实例详解

    本文实例讲述了jQuery unbind()方法使用方法.分享给大家供大家参考,具体如下: jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: 复制代码 代码如下: unbind([type][, data]); type是事件类型,data为将要移除的事件.具体说明如下: 1.如果没有参数,则删除所有的绑定事件: 2.如果提供了事件类型(type)作为参数,则只删除该类型的绑定事件: 3.如果把在绑定时传递的处理函数作为

  • jquery中关于bind()方法的使用技巧分享

    .bind()方法可使用.on()方法来代替 on()方法提高代码易读性,如下 $("input").bind("click", { foo: "hello" }, handler); $("input").on("click", { foo: "hello" }, handler); bind()绑定事件的时候,这些元素必须已经存在,而on()可以处理类似于代理这样的东东,也就是说不存

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字符串类型的事件类型,就是你所需要绑定的事件.这类类型可以包括如下:blur, focus, focusin, focusout, load, re

  • Jquery使用小技巧汇总

    下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 1. 禁止右键点击 $(document).ready

  • jQuery中bind()方法用法实例

    本文实例讲述了jQuery中bind()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的特定事件绑定事件处理方法. 在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构一: 复制代码 代码如下: $(selector).bind(type,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

随机推荐