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实现页面打印的三种方法
Mar 05 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
html中table数据排序的js代码
Aug 09 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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 SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js函数调用的方式
2014/05/06 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
js实现密码强度检验
2017/01/15 Javascript
React Router基础使用
2017/01/17 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
python实现求最长回文子串长度
2018/01/22 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
用python制作个音乐下载器
2021/01/30 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
个人函授自我鉴定
2014/03/25 职场文书
就职演讲稿范文
2014/05/19 职场文书
庆七一活动总结
2014/08/27 职场文书
节约用电通知
2015/04/25 职场文书
初中生活随笔
2015/08/15 职场文书
公司管理建议书
2015/09/14 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python