jQuery中的事件与动画

基本事件

1.载入事件

ready()

2.鼠标事件

基本用法:

1、click事件：点击鼠标左键时触发

　　$('p').click(function(){});

示例：
 
$('p').click(function(){
        alert('click function is running !');
       });
 

2、dbclick事件：迅速连续的两次点击时触发

　　$('p').dbclick(function(){});

示例：
 
$("button").dblclick(function(){
 $("p").slideToggle();
});
 

3、mousedown事件：按下鼠标时触发

　　$('p').mousedown(function(){});

示例:
 
$("button").mousedown(function(){
 $("p").slideToggle();
});
 

4、mouseup事件：松开鼠标时触发

　　$('p').mouseup(function(){});

示例：
 
$("button").mouseup(function(){
 $("p").slideToggle();
});
 

5、mouseover事件：鼠标从一个元素移入另一个元素时触发

　　mouseout事件：鼠标移出元素时触发

　　$('p').mouseover(function(){});

　　$('p').mouseout(function(){});

示例：

$("p").mouseover(function(){
 $("p").css("background-color","yellow");
});
$("p").mouseout(function(){
 $("p").css("background-color","#E9E9E4");
});
 

6、mouseenter事件：鼠标移入元素时触发

     mouseleave事件：鼠标移出元素时触发

　　$('p').mouseenter(function(){});

　　$('p').mouseleave(function(){});

示例:
 
$("p").mouseenter(function(){
 $("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
 $("p").css("background-color","#E9E9E4");
});
                                                                    常用键盘事件的方法

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown 事件	按下按键时
keyup()	触发或将函数绑定到指定元素的keyup 事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress 事件	产生可打印的字符串时

基本用法:

$(document).ready(function () {

   $("#name").keydown(function () {

       $("#id").append("按下按键时\t"); }

).keyup(function () {

       $("#id").append(function () {

           $("#id").append("释放按键时\t"); }

).keypress(function () {

           $("#id").append("产生可打印的字符串\t"); }); });

    $("#name").keydown(function (exe) {

       if(exe.keyCode=="13"){

           alert("确定要提交吗?");

       }

   }

)

}

);

                                   bind()方法的参数说明

参数类型	参数函数	描述
type	事件类型	主要包括 click mouseover mouseout 等基础事件 此外 还可以是自定义事件
[data]	可选参数	作为event..data 属性值传递给事件对象的额外数据对象,该参数不是必须的
fn	处理函数	用来绑定处理函数

1.绑定事件

语法:

  bind(type,[data],fn);

基本用法:

var an=0;

$(document).ready(function () {

   $(window).resize(function () {

        $("#id").append(an+=1);

   });

});

                                      unbind()方法的参数说明

参数类型	参数含义	描述
[type]	事件含义	主要包括 click mouseover mouseout 等基础事件 此外 还可以是自定义事件
[fn]	处理函数	用来解除绑定的事件

2.移除事件

语法:

unbind([type],[fn]);

复合事件

1.hover()方法

语法:

hover(mouseenter,mouseleave);

第一个参数表示鼠标mouseenter 事件第二个参数表示mouseleave 事件

基本用法:

$('p').hover(
　　　function(){},
　　　function(){}
　);

示例:
 
$(".table_list tr").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
 
);

2.toggle()方法

语法:

toggle（fn1,fn2，fnn）

当此函数不带参数时：则与show（）、hide（）方法作用一样，如果元素可见则切换为不可见，如果不可见则切换为可见

带函数时：点击第一次实现fn1函数，第二次实现fn2函数……

基本用法:

$('p').toggle(
　　　　function(){},
　　　　function(){}
　　);

示例：
 
$("p").toggle(
 function(){
 $("body").css("background-color","green");},
 function(){
 $("body").css("background-color","red");},
 function(){
 $("body").css("background-color","yellow");}
);
 

自定义动画：

$(selector).animate（{params}，speed，callback）

params：必填，定义形成动画的css属性

speed：可选，完成动画效果的时间

callback：可选，滑动完成后执行的函数

基本用法:

$(document).ready(function(){

     $("#dianji").click(function () {

        $("dl").animate({ left:"100px", backgroud:"blue", },2000);

    });

});