jQuery之事件与动画总结

一.鼠标事件
click()   单击
dblclick() 双击
            //点击事件
            $("#div1").click(function(){
                $(this).css('background','blue');
            });
            //双击事件
            $('#div2').dblclick(function(){
                alert('我是一个双击事件');
            });


mousedown()
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
mouseup()
鼠标按键松开时发生
            //不松开事件和松开事件
            $('#div3').mousedown(function(){
                $(this).css('background','#ccc').text('我变');
            });
            $('#div3').mouseup(function(){
                $(this).css('background','#888').text('我再变');
            });


mouseenter()
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件,穿过子元素时不会再次触发
建议用这一组可以减轻事件触发次数
mouseleave()
            //滑动事件当滑动到DIV触发事件和离开触发事件，穿过子元素不会再次发生
            $('#div4').mouseenter(function(){
                $(this).css('background','#f00').text('我生气了');
            });
            $('#div4').mouseleave(function(){
                $(this).css('background','#ff54f1').text('我开心');
            });


mouseover()
当鼠标指针位于元素上方时，会发生 mouseover 事件，穿过子元素时会再次触发
mouseout()
            //滑动事件，穿过子元素会再次触发事件
            $('#div5').mouseover(function(){
                $(this).css('background','#ccc').text('我的天空都灰了');
            });
            $('#div5').mouseout(function(){
                $(this).css('background','#0099f8').text('我的天空亮了');
            })


mousemove()
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
            //当鼠标指针在指定元素中移动时，会触发mousemove事件
            $(window).mousemove(function(event){
                var x=event.pageX;
                var y=event.pageY;
                $('#div6').offset({left:x,top:y}).html('<h6>x坐标'+x+',y坐标'+y+'</h6>');
            })
        })


二.键盘事件
keydown([[data],fn])
当键盘被按下时发生
keyup([[data],fn])
在键盘松开就会触发
keypress([[data],fn])
对中文输入法支持不好，无法响应中文输入
无法响应系统功能键（如delete，backspace）
例：
        /*keydown()当键盘被按下时发生
        keyup()在键盘松开就会触发
        keypress()对中文输入法支持不好，无法响应中文输入
        event.which 将 event.keyCode 和 event.charCode 标准化*/
        $(function(){
           $('#text').keyup(function(event){
                var num=$(this).val().length;
               $('h1').text('已经写了'+num+'个字，还可以写'+(10-num)+'个字');
           })
        })


三.表单事件
focus([[data],fn])
当元素获得焦点时触发
blur([[data],fn])
当元素失去焦点时触发
例：
$('#name').focus(function(){
                $('#name').next().text('用户名长度在5个字符到10个字符之间').css('color','#f00');
            });
            $('#name').blur(function(){
                if($(this).val().length<5){
                    $('#name').next().text('用户名长度小于5个字符').css('color','#f00');
                }else if($(this).val().length>10){
                    $('#name').next().text('用户名长度必须少于10个字节').css('color','#f00');
                }else{
                    $('#name').next().text('验证通过').css('color','#0f0');
                }
            })


        })


change([[data],fn])
当元素的值发生改变时会发生
该事件适用于文本域（text field），以及 textarea 和 select 元素
select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
例：
            //当Input框发生变化时会触发这个函数
            $(':input').change(function(){
                alert('我变了');
            });
            $(':input').select(function(){
                alert('呀!我被选中了');
            });
        })


submit([[data],fn])
当提交表单时，会发生 submit 事件
例：
           //当点击的时候让他提交
           $("input[type='submit']").click(function(){
               $('form').submit();
           });
           //当键盘事件触发的时候让他提交
           $(window).keydown(function(){
              if(event.which==13){
                  $('form').submit();
              }
           });
           //阻止默认事件发生
           $('form').submit(function(){
               if($("input[type='text']").val().length>5){
                   $(this).submit();
               }else{
                   return false;
               }
           })


四.窗口事件
resize([[data],fn])
当调整浏览器窗口的大小变化时发生
scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件
例：
            //当调整浏览器窗口的大小的时候会发生
            $(window).resize(function(){
                alert('我变了');
            })
            //当用户滚蛋指定元素的时候，会触发
            $('div').scroll(function(){
                alert("我动了");
            })


五.事件冒泡
事件冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，当触发子元素事件时也会触发上级元素的click事件，且顺序为从子元素到上级元素依次触发
冒泡要求有上下级关系，而且要具有同种类型的事件
阻止事件冒泡
event.stopPropagation()
return false
例：
事件冒泡，当子元素和父元素都有相同的事件时，子元素的事件被触发时，父元素的事件会自动触发
有时候我们只想让子元素的事件触发就需要阻止冒泡
            $('div').click(function(){
                alert('我是D');
            });
            $('p').click(function(event){
                alert('我是P');
                //或者event.stopPropagation()来阻止事件冒泡
                event.stopPropagation();
            })
            $('span').click(function(){
                alert('我是S');
                //用false可以阻止事件冒泡和默认事件的发生
                return false;
            })


六.事件绑定
bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数
unbind(t,[d|f])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件
例：
            //普通点击事件
            $('button').click(function(){
                alert('我是普通事件')
            });
            //绑定事件，绑定事件的时候可以给他增加数据
            $('button').bind('click','我是增加数据',function(event){
                alert('我是绑定事件');
                alert(event.data);
                $(this).css('color','#f00');
            });
            //增加数据也可以增加数组模式
            $('button').bind('click',{username:'张华',age:30},function(event){
                alert('我是绑定事件');
                alert(event.data.username);
                alert(event.data.age);
                $(this).css('color','#f00');
            })
            //事件绑定可以在一个元素中绑定多个事件
            $('button').bind({
                click:function(){
                    alert('我是一');
                },
                mouseup:function(){
                    alert('我是二');
                }
            })


七.事件委派
1.live(type,[data],fn)
给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效 ;事件通过冒泡委派给document元素
die(type,[fn])
从元素中删除先前用.live()绑定的所有事件


//bind绑定事件绑定的时候必须这个标签存在，如果后期添加上的不会触发这个事件
//直接写个事件放在那 如果这个标签不存在后期添加也不会生效
//而live委派事件这个按钮不存在，如果后期添加按钮而会触发这个事件，这个方法只能委派给document


2.delegate(selector,[type],[data],fn)
给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效 ,可以指定事件委派的元素
undelegate([selector,[type],fn])
从元素中删除先前用delegate()绑定的所有事件


//通过delegate也可以进行事件委派，这个方法可以指定事件委派的元素
//这个方法先写委派的对象,后面写委派的事件
例：
            $('.button').live('click',function(){
                alert('我是事件委派');
            });
            //通过delegate也可以进行事件委派，这个方法可以指定事件委派的元素
            //这个方法先写委派的对象,后面写委派的事件
            $('#div1').delegate('.button','click',function(){
               alert('我是div委派')
            });
            //通过程序添加按钮
            $('#btn1').click(function(){
                $(this).after("<button class='button'>新按钮</button>")
            });
            //取消委派
            $('#btn2').click(function(){
                //live委派取消方式
                //$('.button').die('click');
                //delegate委派取消方式，把委派的对象删除
                $('#div1').undelegate('click');
            })


3.on 是用来取代bind、live、delegate实现绑定或委派的
  替代绑定
  $("p").on("click", function(){
  alert( $(this).text() );
  });
  替代委派
  $("#div1").on("click", ".clickme"，function(){
  alert( "test");
  });
  off  取消绑定或委派
      $("p").off("click");
  one 表示只绑定或委派一次
例：
            //on可以用来替代绑定事件
            $('#button').on('click',function(){
                alert("我是绑定事件");
            })
            //on可以用来代替委派事件on后面先写事件，在写名字
            $('#div1').on('click','.button',function(){
                alert('我是委派事件');
            })
            $('#btn1').click(function(){
                $(this).after("<button class='button'>新按钮</button>");
                //你想让哪个事件触发一次就用这个让他事件效果消失
                $(this).off('click');
            })
            //取消委派
            $('#btn2').click(function(){
                $('#div1').off('click');
            })
            //one表示只绑定一次，再次添加没什么用
            $('#div1').one('click','.test',function(){
                alert('我是one委派事件');
            });
            $('#btn3').click(function(){
                $(this).after("<button class='test'>唯一事件</button>");
            })


八.事件切换
hover([over,]out)  针对滑动
toggle(fn, fn2, [fn3, fn4, ...])  针对点击事件
例：
            $('#div1').hover(
                    //相当于鼠标移动事件 只能写两个函数
                    //鼠标移动上去添加一个类
                    function () {
                        $(this).addClass("hover");
                    },
                    //鼠标移开的时候取消一个类
                    function () {
                        $(this).removeClass("hover");
                    }
            );
            //只针对点击事件的
            $('#div2').toggle(
                    function(){
                        $(this).css('background','red');
                    },
                    function(){
                        $(this).css('background','green');
                    },
                    function(){
                        $(this).css('background','pink')
                    },
                    function(){
                        $(this).css('background','purple')
                    },
                    function(){
                        $(this).css('background','yellow')
                    }
            )


九.隐藏显示效果
show([s,[e],[fn]])  显示隐藏的元素
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
hide([s,[e],[fn]])  隐藏元素
toggle([s],[e],[fn])   如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
例：
        $(function(){
            //隐藏元素
            $('button:eq(1)').click(function(){
                $('div').hide(1000,function(){
                    alert('我消失了');
                });
            })
            //显示元素
            $('button:eq(0)').click(function(){
                $('div').show(1000,function(){
                    alert('我出现了')
                });
            })
            //切换元素,后面可以跟无线函数
            $('button:last').click(function(){
                $('div').toggle(1000);
            })
        })


十.上卷下拉效果
slideDown([s],[e],[fn])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次。
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
例：
        $(function(){
            //下拉
            $('button:eq(0)').click(function(){
                $('div').slideUp(1000);
            });
            //上卷
            $('button:eq(1)').click(function(){
                $('div').slideDown(1000);
            })
            //切换
            $('button:eq(2)').click(function(){
                $('div').slideToggle(1000);
            })
        })


十一.淡入淡出效果
fadeIn([s],[e],[fn])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
fadeToggle([s,[e],[fn]])
例：
        $(function(){
            //淡入
            $('button:first').click(function(){
                $('div').fadeIn(1000);
            });
            //淡出
            $('button:eq(1)').click(function(){
                $('div').fadeOut(1000);
            });
            //切换
            $('button:last').click(function(){
                $('div').fadeToggle(1000);
            });


        })