jQuery学习笔记———jQuery中的事件和动画
1、加载DOM
$(window).load(function(){
//加载window对象所绑定的处理函数
})2、简写方式
$(document).ready(function(){
//编写代码
})
可写成下面代码：
$(function(){
//编写代码
}）3、事件绑定
（1）$(selector).bind(event,data,function);
第1个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，也可以是自定义名称。（注意：jQuery中的时间绑定类型比普通的js事件绑定类型少了”on”)
第2个参数为可选参数，作为event.data属性值传给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。
简写绑定事件：
$(selector).mouseover(function(){
//实现代码
})
绑定多个事件类型：
$(“mouseover mouseout”,function(){});
（2）on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。
$("p").on("click", function(){
alert( $(this).text() );
});
（3）off()方法移除用.on()绑定的事件处理程序
$("p").off(); //移除所有的绑定事件
$("p").off( "click", "**" ); //移除绑定的click事件
（4）one()方法为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
当所有段落被第一次点击的时候，显示所有其文本。
jQuery 代码:
$("p").one("click", function(){
alert( $(this).text() );
});（5）unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移除的函数。具体说明如下：
（1）如果没有参数，则删除所有的绑定的事件；
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件；
（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。
（6）trigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。
$('#btn').trigger("click"）； //触发浏览器支持的具有相同名称的事件
$('#btn').trigger("myClick"); //触发自定义名称的事件
$("input").triggerHandler("focus"); //只想触发绑定的focus事件，而不想执行浏览器默认操作4、事件委派
（1）delegate() 方法指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
当点击鼠标时，隐藏或显示 p 元素：
HTML 代码:
"background-color:red">
这是一个段落。
jQuery 代码:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});（2）删除由 delegate() 方法添加的一个或多个事件处理程序。
从p元素删除由 delegate() 方法添加的所有事件处理器：
jQuery 代码:
$("p").undelegate();
从p元素删除由 delegate() 方法添加的所有click事件处理器：
jQuery 代码:
$("p").undelegate( "click" )5、合成事件
（1）hover()方法
hover(enter,leave) 用于模拟光标悬停事件，当光标移到到元素上时，会触发指定的第一个函数(enter)；当光标移出这个元素时，会触发指定的第2个函数(leave)
$(selector).hover(function(){},function(){});注意：CSS中的伪类选择器”:hover”可以用于任何元素，可是在IE6中仅可用于超链接元素。此时可以使用jQuery中的hover()方法。hover()方法替代了jQuery中的bind(“mouseenter”)和bind(“mouseleave”)方法。
（2）toggle()方法
toggle(fn1,fn2,……fnN); 用于模拟鼠标连续点击事件。第一次单击元素触发指定的第一个函数，以此类推。
6、事件冒泡
多个元素响应同一个事件
（1）停止事件冒泡
$(selector).bind("click",function(event){
//实现函数
event.stopPropagation(); //停止事件冒泡
return false; //这种方式也可以停止事件冒泡
});（2）阻止默认行为（网页中的元素有自己的默认行为，如单击超链接后会跳转、点击“提交”按钮后表单会提交）
$(selector).bind("click",function(event){
//实现函数
event.preventDefault(); //阻止默认行为
return false; //这种方式也可以阻止默认行为
});注意：事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。jQuery不支持事件捕获，如果需要使用事件捕获则需使用原生的JavaScript.
7、事件对象属性event.pageX和event.pageY
该方法的作用是获取到光标相对于页面的x坐标和y坐标，如果没有使用jQuery时，那么IE浏览器中是event.x/event.y,而Firefox浏览器中是用event.pageX/event.pageY.如果页面上有滚动条，则还要加上滚动条的宽度或高度。
8、jQuery中的动画
（1）show()方法和hide()方法（可以指定一个速度参数，如show(“slow”)或show(1000))
$("element").hide(); //通过hide()方法隐藏元素
$("element").css("display","none"); //通过css方法隐藏元素(2)fadeIn()方法和fadeOut()方法，在指定的一段时间内改变元素的不透明度
（3）slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为”none”,当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏。使用slideUp()方法和slideDown()方法再次对“内容”的显示和隐藏方式进行改变。
$("panel h2.head").toggle(function(){
$(this).next().slideUp();},function(){
$(this).next().slideDown();})（4）toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。下面两种代码都是表示一样的效果,当单击“标题”链接后，内容会在可见和隐藏两种状态之间切换。
$("panel h2.head").click(function(){
$(this).next().toggle();
});$("panel h2.head").toggle(function(){
$(this).next().hide();},function(){
$(this).next().show();})$("panel h2.head").click(function(){
if($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(this).next().show();
}
})（5）slideToggle()方法通过高度变化来切换匹配元素的可见性，这个动画效果只调整元素的高度。下面两种代码效果一样，当单击“标题”链接后，“内容”会在可见和隐藏两种状态之间切换，不过是通过改变元素的高度来实现。
$("panel h2.head").click(function(){
$(this).next().slideToggle();
});$("panel h2.head").toggle(function(){
$(this).next().slideUp();},function(){
$(this).next().slideDown();})(6)fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽带不会发生变化。
$("panel h2.head").click(function(){
$(this).next().fadeTo(600,0.2); //当单击”标题“链接后，”内容“会渐渐地调整到指定的不透明度（20%)
});(7)fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。下面两种代码效果一样。
$("panel h2.head").click(function(){
$(this).next().fadeToggle();
});$("panel h2.head").toggle(function(){
$(this).next().fadeOut();},function(){
$(this).next().fadeIn();})(8)自定义动画方法animate()
animate(params, speed, callback);
参数说明：
params:一个包含样式属性及值得映射，比如{property:”value1”,property:”value2”,….}
speed:速度参数，可选。
callback:在动画完成时执行的函数，可选。
（9）停止元素的动画stop()
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd都是可选的参数，为boolean值（true或false)。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
（10）判断元素是否处于动画状态
if(!$(element).is(“:animated”)){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
（11）延迟动画delay(),delay()方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中的函数的执行，也可以用于自定义队列。
如：delay(1000)
(12)finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
js中SetInterval与setTimeout用法
JS里设定延时：
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout(“function”,time) 设置一个超时对象 setInterval(“function”,time) 设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次