jQuery中 bind的用法简单介绍


Posted in Javascript onFebruary 13, 2017

bind介绍

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

语法

$(selector).bind(event,data,function)

event 必须。添加到元素的一个或多个事件如:click,mouseover,mouseup,change,select

data 可不填。传递到函数的额外数据,如:$(selector).bind(“click”,”input”,function(){});

function(){} 必填。绑定事件触发的函数

bind绑定多个函数

$("button").bind({ // 注意它的格式是 json
  click:function(){$("div").css("border","5px solid orange");},
  mouseover:function(){$("div").css("background-color","red");}, 
  mouseout:function(){$("div").css("background-color","#FFFFFF");} 
 });

4.bind绑定数据

// bind() 绑定 click 事件传 参数2 并且打印出 参数2
 $('button').bind('click',['路飞','索隆','乌索普'],function(event){
  alert(event.data[0]); // 路飞
 });

5.unbind bind事件移除

    html 代码 

<button>unbind()</button>
 <p>点我删除上边按钮的事件</p>

    js 代码 

// bind() 绑定多个点击事件
 $('button').click(function(){
  alert('我是第一个点击事件');
 });
 $('button').click(function(){
  alert('我是第二个点击事件');
 });
 $('button').bind('click',function(){
  alert('我是第三个点击事件');
 });
 // unbind() 删除点击事件
 $('p').bind('click',function(){
  $('button').unbind('click');
  alert('button 的点击事件被删除');
 });

以上所述是小编给大家介绍的jQuery中的 bind用法简单介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
javascript每日必学之多态
Feb 23 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python中list循环语句用法实例
2014/11/10 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python如何将装饰器定义为类
2020/07/30 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
党校自我鉴定范文
2013/10/02 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
交心谈心活动总结
2015/05/11 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
自荐信大全
2019/03/21 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript