jQuery的事件与效果
jQuery事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。例如： "当您按下按键时触发 keypress 事件"。
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("div").click(function(){
// 动作触发后执行的代码!!
});
当div元素被点击时将会发生function函数中写入的动作。
常用的jQuery事件有click：
当p元素被点击时，将该p元素隐藏
$("p").click(function(){
$(this).hide();
});
dblclick()
当p元素被双击时，p元素隐藏
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
该事件为鼠标指针穿过元素时才会出现，而mousehover则是鼠标移上该元素的任何一个子元素都会出现事件。
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery有显示、隐藏、切换，滑动，淡入淡出，动画等。
显示与隐藏
.show与.hide
$("#hide").click(function(){
$("p").hide(1000);//其中1000为速度，1000毫秒
});
$("#show").click(function(){
$("p").show(fast); //速度
});
使用.show( )与.hide( ) 来将p元素实现显示与隐藏。
toggle( )可以切换显示与隐藏效果。
$("button").click(function(){
$("p").toggle(slow);
});
jQuery 拥有下面四种 fade 方法：
fade in ( ) 淡入
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fade out( ) 淡出
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fade toggle ( ) 切换淡入淡出效果
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fade to ( )
jQuery fade to ( ) 允许渐变给不同的透明度 （0~1）。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间 ，可取0，但不可以取1）。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery 拥有以下滑动方法：
slideDown()
jQuery slideDown() 方法用于向下滑动元素。
$("#flip").click(function(){
$("#panel").slideDown();
});
点击id为flip的div将id为panel的div划出
slideUp()
jQuery slideDown() 方法用于向上滑动元素。
$("#flip").click(function(){
$("#panel").slideUp();
});
slideToggle()
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery animate() 方法用于创建自定义动画。
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
jQuery animate( ) 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){
$("#panel").stop();
});
Callback 函数在当前动画 100% 完成之后执行。
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
例：在隐藏效果结束后实现回调函数。
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
若没有回调函数，则在隐藏效果开始前就弹出。
jQuery链
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
上面将css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
