首页 » jQuery » JQuery_事件

JQuery_事件

原文 http://blog.csdn.net/pseudonym_/article/details/76285313

2017-07-29 00:20:03阅读(613)

1. 页面加载完毕事件
 在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中,通常使用Window.onload方法,在JQuery中使用$(document).read方法。

方法 执行时机 编写个数 简化写法 window.onload() 必须等待网页中的所有内容加载完毕后(包括图片)才能执行 不能编写个数 无 $(document).ready() 网页中的所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 能同时编写多个 $()

 
2. 事件绑定
 我们除了可以直接为页面增加事件,也可以利用bind()为元素来绑定事件。
语法:bind(type,[data],fn)

参数 作用 type 含有一个或者多个事件类型的字符串。 data 作为event.data属性值传递给事件对象的额外数据对象。 fn 绑定到每个匹配元素的事件上面的处理函数。

 type参数提供可以绑定的事件有:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。

3. 事件解绑
 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。这是解绑所有的事件。  例如:$("input").click(function(){
$("#panel h5.head").unbind("mouseout");
})

4. 移除指定事件指定函数

<script language="JavaScript">
  $(function(){
     function event(){
     var $content = $(this).next("div.content");
     if($content.is(":visible")){
        $content.hide();
     }else{
        $content.show();
     }
     }
     $("#panel h5.head").bind("click",event)
     $("input").click(function(){
       $("#panel h5.head").unbind("click",event);
     })
  })
</script>

5. 事件切换hover()
 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。

<!--例子-->
<script language="JavaScript">
    $(function(){
        $("#panel h5.head").hover(function(){
            $(this).next("div.content").show();
        },function(){
            $(this).next("div.content").hide();   
        })
    })
  </script>

6. 事件切换:toggle()
 每次点击后依次调用函数。

<!--例子-->
 <script language="JavaScript">
    $(function(){
        $("#panel h5.head").toggle(function(){
        $(this).next("div.content").show();
        },function(){
        $(this).next("div.content").hide();
        })
    })
  </script>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹