jquery 事件

浏览数：52 / 时间：2015年06月09日

1.$("#id").bind("click",function(){
    //dosomething
});
2.$(".className").mouseover(function(){
    //dosomethind(简写)
});
3.$(function(){
    $("xx xx.className").hover(function(){
        //进入这个元素的时候
    },function(){
        //离开这个元素的时候
    });
});
4.$("#idName").toggle(function(){},function(){},function(){});可以有N个参数,每单击一下元素，就触发第一个，然后第二个，第N个，再第一个

事件冒泡

5.event.stopPropagation();停止冒泡事件
6.event.preventDefault(); 阻止默认行为
###################也可以return false停止冒泡事件和阻止默认行为,而不调用上面的方法
jquery不支持事件捕获

7.event.type获得事件的类型如click
    $(function(){
        $("a").click(function(event){
            alert(event.type);
            event.preventDefault();
        });
    });
8.event.target获得触发事件的元素
    $(function(){
        $("a").click(function(event){
            alert(event.target);
            alert(event.target.href);    //a要转到的连结地址
            event.preventDefault();
        });
    });
9.event.pageX,event.pageY方法
    $(function(){
        $("p").click(function(event){
            alert(event.pageX);
            alert(event.pageY)
            event.preventDefault();
        });
    });
10.event.which 鼠标单击中获得左，中，右键，分别为1,2,3
    $(function(){
        $("body").mousedown(function(e){
            alert(e.which);
            event.preventDefault();
        });
    });
11.键盘按下事件
    $("body").keydown(function(e){
            alert(e.keyCode)
    });

12.删除以前注册的事件
    $("input[type=button][value=submit]").unbind();//删除注册的所有事件
    $("input[type=button][value=submit]").unbind("click");//删除注册的所有click事件
    $("input[type=button][value=submit]").unbind("click",langhua);//只删除注册的函数名叫langhua的click事件

13.注册的事件只发生一次然后就不再发生了(one方法)
    $("input[value=Click]").one("click",function(){
        alert("AAAAAAAAAAAAAA");
    });

模拟操作    

14.常规模拟
   $("input[id=langhua]").trigger("focus").trigger("select"); //模拟文本框得到焦点,并模拟全选事件
   也可以简写成$("input[id=langhua]").focus().select();

15.触发自定义事件
   $("input[type=button][value=submit]").bind("myClick",function(){
       alert("自定义事件");
   });
   $("input[type=button][value=submit]").trigger("myClick");//这样就触发了自己定义的事件

16.触发要传递数据的事件
   $("input[type=button][value=submit]").bind("myClick",function(field1,field2){
       alert(field1+"__"+field2);
   });
   $("input[type=button][value=submit]").trigger("myClick",["value1","value2"]);//这样就触发了自己定义的事件

17.
   $("input[id=langhua]").trigger("focus") //不仅会触发focus事件,还会触发默认的得到焦点事件
   //所以如果只想单纯的触发一个事件就用$("input[id=langhua]").triggerHandler("focus");

动画
18.Jquery做的动话都要求在标准模式下,即头部的DTD为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
不然的话会有可能产生动画抖动

19. show(),hide()方法
    有三个可用的参数slow,normal,fast分别是600,400,200毫秒
    还可以直接用毫秒数

20. fadeIn(),fadeOut()方法,改变透明度
    也可以传时间

21.slideDown()[这个是显示],slideUp()[这个是隐藏]改变高度

22.自动简单动画

animate(params,speed,callback);
(1)params:一个包含样式属性及值的映射,如{property1:"value1",property2:"value2".....}
(2)speed:速度参数,可选
(3)callback:动画完成时执行的函数,可选

例如:
#langhua{
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #0050d0;
    background:#96E555;
    cursor: pointer
}
页面DIV
<div id="langhua"></div>

为了使元素动起来必须先设置DIV的position: relative;或position: absolute;


然后加截click事件
$(function(){
    $("#langhua").click(function(){
        $(this).animate({left:"500px",top:"300px"},3000);
    });
});

累加累减写法
$(function(){
    $("#langhua").click(function(){
        $(this).animate({left:"+=500px",top:"-=300px",height:"-=10px"},3000);
    });
});

多重动画(动画队列,一个一个的运行)
$(function(){
    $("#langhua").click(function(){
        $(this).animate({left:"+=500px"},3000);
        $(this).animate({top:"-=300px"},2000);
        $(this).animate({height:"-=10px"},100);
    });
});

$(function(){
    $("#langhua").click(function(){
        $(this).animate({left:"+=500px"},3000).animate({top:"-=300px"},2000)
                              .animate({height:"-=10px"},100)
                              .fadeOut();
    });
});

23.停止动画stop()
   停止动画对列stop(true);(page 129)

24.判断元素是否处于动画状态
if(!$("#langhua").is(":animated")){
    //没有处于动画状态的就加上动画状态
}

25.toggle()方法,切换元素可见状态,如果元素是可见的,就换成不可见的,如果是不可见的,就换成可见的.

26.slideToggle()方法,同上面的方法,这个是高度变化

27.fadeTo()方法,把元素的不透明度,以渐进的方法调整到指定值
$("#panel h5.head").click(function(){
    $(this).next("div.content").fadeTo(600,0.2);
});