详解jQuery中的事件(2)

  其中type是事件类型,包括:click,keypress,load,submit,dblclick,keydown,change,resize,mouseenter,keyup,scroll,focus,mouseleave,blur,unload等,也可以是自定义事件名称。第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。

  HTML代码如下:

<div id="container"> <h4 class="head">jQuery事件机制</h4> <div class="content"> jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 </div> </div> 

  按照需求,需要完成以下几个步骤:

  (1)等待DOM装载完毕;

  (2)找到“标题”所在的元素,绑定click事件;

  (3)找到“内容”元素,将“内容”显示出来。

  根据分析的步骤,写出jQuery代码如下:

$(function(){ $("#container h4.head").bind("click", function(){ $(this).next().show(); //获取并显示“内容”元素 }) })

  当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容”。jQuery代码如下:

$(function(){ $("#container h4.head").bind("mouseover", function(){ $(this).next().show(); //获取并显示“内容”元素 }).bind("mouseout", function(){ $(this).next().hide(); }); })

  这里需要知道的一点是,jQuery中bind方法是可以多次调用的,并且可以简化为将上面的第二个bind去掉。 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/e03bfae64acb98c4b83bfe5b17fd6875.html