jQuery之事件绑定

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

下面是具体的用法:

jQuery之事件绑定
<script type="text/javascript">
$(function(){
    $head = $("#panel h5.head");//选中
    $head.bind("click",function(){//如果点击,就会触发事件,将下面的内容显示出来
        $(this).next().show();
    })
})
</script>
jQuery之事件绑定

is(":hidden")可以判断对象是否隐藏。

is(":visible")可以判断对象是否可见。

jQuery之事件绑定
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("click",function(){
        var $content = $(this).next();
        if($content.is(":visible")){//如果可见,将其隐藏。如果隐藏,将其可见。
            $content.hide();
        }else{
            $content.show();
        }
    })
})
</script>
jQuery之事件绑定

mouseover鼠标飘过。

jQuery之事件绑定
<script type="text/javascript">
$(function(){
    $("#panel h5.head").bind("mouseover",function(){
        $(this).next().show();//飘过显示
    });
      $("#panel h5.head").bind("mouseout",function(){
         $(this).next().hide();//飘离隐藏
    })
})
</script>
jQuery之事件绑定

直接将事件简写成如下的方式也可以:

jQuery之事件绑定
<script type="text/javascript">
$(function(){
    $("#panel h5.head").mouseover(function(){
        $(this).next().show();
    });
    $("#panel h5.head").mouseout(function(){
         $(this).next().hide();
    })
})
</script>





上一篇:jQuery之合成事件


下一篇:HBuilder