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实现图片轮播效果代码
Sep 03 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
如何快速上手Vuex
Feb 14 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
javascript实现左右缓动动画函数
Nov 25 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
php.ini 中文版
2006/10/28 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
JS打印组合功能
2016/08/04 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
python 字符串格式化代码
2013/03/17 Python
Python的gevent框架的入门教程
2015/04/29 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python看某个模块的版本方法
2018/10/16 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python能做什么
2020/06/02 Python
Python 列表反转显示的四种方法
2020/11/16 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
机械设计毕业生自荐信
2014/02/02 职场文书
社区工作者感言
2014/03/02 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
利用Python实现Picgo图床工具
2021/11/23 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript