管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jQuery中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="http://www.glzy8.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="http://www.glzy8.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/

教程首页 更多教程