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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
咖啡的植物学知识
2021/03/03 咖啡文化
如何将数据从文本导入到mysql
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php xhprof使用实例详解
2019/04/15 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python中封包建立过程实例
2021/02/18 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
电子商务应届生求职信
2013/11/16 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
董事长助理工作总结2015
2015/07/23 职场文书