jQuery中的事件

事件绑定函数：bind(type, [, data], fn);

3个参数说明如下：

type:  

        blur: 元素失去焦点 a, input, textarea, button, select, label, map, area

        focus：元素获得焦点 a, input, textarea, button, select, label, map, area

        load: 某个页面或图像完成加载。window, img

        resize: 窗口或框架被调整尺寸. window, iframe, frame

        scroll: 滚动文档的可视部分。window

        unload: 用户退出页面。window

 

        click:点击事件。

        dbclick:双击事件

        mousedown:鼠标按键被按下。

        mouseup:鼠标按键弹起。

        mousemove:鼠标移动

       mouseover:鼠标移入某元素，会形成事件冒泡

        mouseout:鼠标移出某元素，会形成事件冒泡 

        mouseenter:鼠标移入某元素，不会形成事件冒泡

        mouseleave:鼠标移出某元素，不会形成事件冒泡

        change: 用户改变域的内容。input ,textarea, select

        select: 文本被选定。document,input,textarea

        submit:提交。

        keydown:按键被按下

        keypress:按键被按下或按住。

       keyup: 按键弹起

       

第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象

 

第三个参数则是用来绑定的处理函数

 

<div id="panel">
  <h5 class="head">什么是jquery</h5>
  <div class="content">
       jQuery是继.........
  </div>
</div>

 绑定单击事件

$(function(){
   $("#panel h5.head").bind("click", function(){
       $(this).next("div content").show();
})
})

 加强效果，使用jQuery中的is()方法来判断元素是否显示。jQuery代码如下：

$function(){
  $("#panel h5.head").bind("click", function(){
     if($(this).next("div.content").is(":visible")){
   $(this).next("div.content").hide(); }
   else{
   $(this).next("div.content").show(); 
}
})
}

合成事件 hover(enter, leave)

 用途：用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter),当移出元素时会触发第二个函数(leave)

$function(){
  $("#panel h5.head").hover(
    function(){$(this).next("div.content").hide(); }
    ,function(){
   $(this).next("div.content").show(); 
})
}

 

合成事件 toggle(fn1, fn2,...fnN)

用途：用于模拟鼠标连续单击事件。当第一个单击元素时，触发第一个函数，第二次触发第二个函数，然后循环。

$function(){
  $("#panel h5.head").toggle(
    function(){$(this).next("div.content").show(); }
    ,function(){
   $(this).next("div.content").hide(); 
})
}

 toggle()还可用于切换元素的可见状态：

$function(){
  $("#panel h5.head").toggle(
    function(){$(this).next("div.content").toggle(); }
    ,function(){
   $(this).next("div.content").toggle(); 
})
}