jQuery的bind()方法使用详解


Posted in Javascript onJuly 15, 2015

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>

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

Javascript 相关文章推荐
Javascript 事件流和事件绑定
Jul 16 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
jquery实现轮播图效果
Feb 13 Javascript
javaScript封装的各种写法
Aug 14 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
纯JavaScript实现的分页插件实例
Jul 14 #Javascript
javascript实现网页字符定位的方法
Jul 14 #Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 #Javascript
jquery获得当前html页面源码的方法
Jul 14 #Javascript
javascript实现动态表头及表列的展现方法
Jul 14 #Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 #Javascript
常用jQuery代码分享
Jul 14 #Javascript
You might like
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php获取excel文件数据
2017/04/21 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
javascript实现yield的方法
2013/11/06 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
python实现神经网络感知器算法
2017/12/20 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
指针和引用有什么区别
2013/01/13 面试题
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
行政助理岗位职责范文
2013/12/03 职场文书
法务专员岗位职责
2014/01/02 职场文书
公司活动策划方案
2014/01/13 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
保研推荐信
2014/05/09 职场文书
优秀员工演讲稿
2014/05/19 职场文书
中职招生先进个人材料
2014/08/31 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Python开发五子棋小游戏
2022/05/02 Python