jQuery中bind()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中bind()方法用法。分享给大家供大家参考。具体分析如下:

此方法为匹配元素的特定事件绑定事件处理方法。
在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数。

语法结构一:

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

参数列表:
参数 描述
type 定义绑定到匹配元素中的事件类型。 如果有多个事件使用空格分隔。
data 可选。传递给事件对象的额外数据对象。
function 定义当事件发生时运行的方法。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>bind()函数-三水点靠木</title>

<style type="text/css">

div{

  width:100px;

  height:100px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("div").bind("click",function(){$("div").css({color:"green",fontSize:"20px"})});

})

</script>

</head>

<body>

  <div>三水点靠木欢迎您</div>

</body>

</html>

语法结构二:

$(selector).bind({type:function, type:function, ...})

参数列表:

参数 描述
{type:function, type:function, ...}         定义绑定到匹配元素的事件和事件处理方法。 type与function参数描述如上表。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>bind()函数-三水点靠木</title>

<style type="text/css">

div{

  width:100px;

  height:100px;

  border:1px solid red

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("div").bind({click:function(){$("div").css("color","green")},

    mouseover:function(){$("div").css("background-color","blue")},

    dblclick:function(){$("div").css("background-color","red")}

  })

})

</script>

</head>

<body>

  <div>三水点靠木欢迎您</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文转自:蚂蚁部落http://www.softwhy.com/

Javascript 相关文章推荐
Javascript Request获取请求参数如何实现
Nov 28 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
javascript中setInterval的用法
Jul 19 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
webpack打包非模块化js的方法
Oct 24 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
jQuery中on()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之创建DOM元素
Jan 19 #Javascript
jQuery学习笔记之2个小技巧
Jan 19 #Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 #Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 #Javascript
jQuery创建DOM元素实例解析
Jan 19 #Javascript
jQuery使用之处理页面元素用法实例
Jan 19 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python负载均衡的简单实现方法
2018/02/04 Python
python3安装speech语音模块的方法
2018/12/24 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
检讨书之工作不认真
2019/08/14 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle