脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery中bind()方法用法

jQuery中bind()方法用法实例

 更新时间：2015年01月19日 11:31:51   投稿：shichen2014  
这篇文章主要介绍了jQuery中bind()方法用法,实例分析了bind()方法的功能、定义及为匹配元素的特定事件绑定事件处理方法的技巧,需要的朋友可以参考下

本文实例讲述了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://www.jb51.net/" />
<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://www.jb51.net/" />
<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/

您可能感兴趣的文章:

相关文章

  • js判断复选框是否选中的方法示例【基于jQuery】

    js判断复选框是否选中的方法示例【基于jQuery】

    这篇文章主要介绍了js判断复选框是否选中的方法,结合实例形式分析了基于jQuery实现的复选框选中判断相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考下
    2014-06-06
  • jquery实现图片左右切换的方法

    jquery实现图片左右切换的方法

    这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元素及对应样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-05-05
  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    基于jQuery的网页右下角弹出广告(IE7,firefox)

    以前曾写过一个,不过太麻烦了,呵呵```现在改进了一下,其实很简单:css定位层一直在右下角,用js控制层的高度增减。
    2010-08-08
  • web开发人员学习jQuery的6大理由及jQuery的优势介绍

    web开发人员学习jQuery的6大理由及jQuery的优势介绍

    jQuery是一个用来简化HTML客户端开发的JS（JavaScrip）库，它支持HTML DOM处理，同时还融合了部分HTML和CSS
    2013-01-01
  • jquery实现公告翻滚效果

    jquery实现公告翻滚效果

    本文给大家分享的是一则使用jQuery实现公告的翻滚效果的代码，十分简洁实用，兼容性也非常不错，这里推荐给小伙伴们
    2015-02-02
  • Iframe实现跨浏览器自适应高度解决方法

    Iframe实现跨浏览器自适应高度解决方法

    这篇文章主要介绍了Iframe实现跨浏览器自适应高度解决方法,通过父层容器的应用来实现这一功能,非常实用的一个技巧,需要的朋友可以参考下
    2014-09-09
  • jQuery响应滚动条事件功能示例

    jQuery响应滚动条事件功能示例

    这篇文章主要介绍了jQuery响应滚动条事件功能,可实现针对滚动条状态的实时计算与响应功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • jQuery中triggerHandler()方法用法实例

    jQuery中triggerHandler()方法用法实例

    这篇文章主要介绍了jQuery中triggerHandler()方法用法,实例分析了triggerHandler()方法的功能、定义及触发被选元素的指定事件类型的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery电话号码验证实例

    jQuery电话号码验证实例

    这篇文章主要为大家详细介绍了jQuery电话号码验证实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论