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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
前端性能优化及技巧
May 06 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
微信自定义分享php代码分析
2016/11/24 PHP
重定向实现代码
2006/11/20 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
javascript几个易错点记录
2014/11/26 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
华为慧通笔试题
2016/04/22 面试题
培训自我鉴定
2014/01/31 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
求职信模板
2014/05/23 职场文书
火箭队口号
2014/06/18 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
优秀团员事迹材料
2014/12/25 职场文书
神农溪导游词
2015/02/11 职场文书
终止劳动合同通知书
2015/04/16 职场文书
python基础之类方法和静态方法
2021/10/24 Python