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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
js实现类选择器和name属性选择器的示例步骤
Feb 07 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:风雨欲来 路在何方?
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php操作MongoDB类实例
2015/06/17 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
个人简历自我评价
2014/02/02 职场文书
2014年党课学习材料
2014/05/11 职场文书
应聘教师自荐书
2014/06/16 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
通讯稿格式及范文
2015/07/22 职场文书
同学聚会感言一句话
2015/07/30 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技