带你学习JQuery：事件绑定bind

 

调用bind()方法对匹配的元素进行特定的事件绑定

bind()方法有三个参数
bind(type,date,function)

第一个和第三个参数是必须的，分别表示事件类型和绑定的处理函数，第二个是可选的，标示传递给事件对象的额外数据对象

type包括：blur、focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mouseover,keyup,keydown,submit......

先从一个基本的效果看看：点击“标题”连接显示内容：

<div id="testDiv">

  <h1 class='test">标题</h1>

   <div class="titcontent">

这是显示内容 

 </div>

</div.

</div>

 

Jquery函数可以简单写成如下：

$(function(){

$("#testDiv h1.test").bind("click",function(){

$(this).next("div.titcontent").show();

}

)

})

对此可以再进行简单的升级，即点击连接，隐藏内容显示，再次点击，隐藏内容消失

JQuery 代码写成：

 

$(function(){

$("testDiv h1.test").bind('click",function(){

var $mytest=$(this).next("div.titcontent");

if($mytest.is(":visible")){

$mytest.hide();

}else{

$mytest.show();

}

})

})

简单的操作就完成了！！