一、jQuery中的事件

1、事件分类：基础事件（鼠标事件、键盘事件、window事件、表单事件）和复合事件（鼠标光标悬停、鼠标连续点击）。

2、基础事件：

（1）基本语法：

事件名 = "函数名()";
DOM 对象.事件名 = 函数;

（2）载入事件：

$(document).ready(function(){
    //jQuery代码
});

（3）鼠标事件：

$('p').click(function(){});        //点击鼠标左键时触发
$('p').dbclick(function(){});    //迅速连续的两次点击鼠标时触发
$('p').mousedown(function(){});    //按下鼠标时触发
$('p').mouseup(function(){});    //松开鼠标时触发
$('p').mouseover(function(){});    //鼠标从一个元素移入另一个元素时触发，在其备选元素的子元素上来回进入时也会触发
$('p').mouseout(function(){});    //鼠标移出元素时触发，在其备选元素的子元素上来回进入时也会触发
$('p').mouseenter(function(){});    //鼠标移入元素时触发，在其备选元素的子元素上来回进入时不会触发
$('p').mouseleave(function(){});    //鼠标移出元素时触发，在其备选元素的子元素上来回进入时不会触发

（4）键盘事件：

$('input').keydown(function(){});    //键盘按下时触发
$('input').keyup(function(){});    //键盘释放按键时触发
$('input').keypress(function(){});    //键盘产生可打印的字符时触发

（5）浏览器事件：

//对浏览器窗口调整大小进行计数
$(window).resize(function() {
    $('span').text(x+=1);
});

3、绑定事件：

//基本语法
//type：事件类型；data：可选参数；fn：处理函数
$(selector).bind(type,[data],fn);

//实例（绑定一个和绑定多个）
$('on').bind("mouseover",function(){});

$('on').bind(
    mouseover:function(){},
    mouseout:function()
);

4、解除绑定事件：

//基本语法
$(selector).unbind(type,fn);

//实例
$('on').unbind("mouseover",function(){});

5、复合事件：

（1）hover()：

//基本语法
//inFunction：规定 mouseenter 事件发生时运行的函数。
//outFunction：可选规定 mouseleave 事件发生时运行的函数。
$(selector).hover(inFunction,outFunction);

//实例
$('selector').hover(handlerIn, handlerOut);

（2）toggle()：

//基本语法
//每当被选元素被点击时要运行的函数。
$('selector').toggle(function);

//实例
$("p").toggle(
    function(){$("p").css({"color":"red"});},
    function(){$("p").css({"color":"blue"});};
});

jQuery中的动画

1、控制元素显示：

//基本语法
//speed：可选规定显示效果的速度。
//easing：可选规定在动画的不同点上元素的速度。默认值为 "swing"开头结尾慢中间快。"linear" - 匀速移动。
//callback：可选show() 方法执行完之后，要执行的函数。
$(selector).show(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").show();
});

2、控制元素隐藏：

//基本语法
$(selector).hide(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").hide();
});

3、控制元素淡入：

//基本语法
$(selector).fadeIn(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").fadeIn();
});

4、控制元素淡出：

//基本语法
$(selector).fadeOut(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").fadeOut();
});

5、改变元素高度：

//基本语法
$(selector).slideUp(speed,easing,callback);
$(selector).slideDown(speed,easing,callback);

//实例：
$("button").click(function(){
    $("p").slideUp();
});

$("button").click(function(){
    $("p").slideDown();
});

6、自定义动画：

//基本语法
//styles：规定产生动画效果的一个或多个 CSS 属性/值。
$(selector).animate({styles},speed,easing,callback);

//实例
$("button").click(function(){
    $("#box").animate({height:"300px"});
});