一.jquery中的事件 1.执行时机 jquery中使用$(document).ready()方法代替window.onload。区别在于window.onload在网页中的所有元素（包括元素的所有
一.jquery中的事件
1.执行时机
jquery中使用$(document).ready()方法代替window.onload。区别在于window.onload在网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器中才开始执行，而$(document).ready()在DOM完全就绪时就可以被调用。解决方法是另外一个页面加载方法load()，load()会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上，会在元素的内容加载完毕后触发，如果绑定给window对象，会在所有内容加载完毕后触发。
$(window).load(function{})等价于window.onload=function(){}
多个事件的绑定以及简写
格式：$(document).ready(function(){ })只需多次追加新的行为即可
简写$(function(){ }) ；也可以简写把document省略，即$().ready(function(){})
2.事件绑定
使用bind()方法来匹配元素进行特定事件的绑定，调用格式bind(type,[.data],fn);
第一个参数是事件类型，包括：blue、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、moseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等
第二个参数是可选参数，作为even.data属性值传递给事件对象的额外数据对象
第三个参数用来绑定的处理函数。
bind()方法的简写例：$("#panel h5.head").bind("mouseover",function(){})
$("#panel h5.head").mouseover(function(){})与ready()的简写相似
3.合成事件
jquery中的两个合成事件hover()方法和toggle()方法，都属于jquery自定义的方法。
hover(enter,leave)；用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter)；当光标移出这个元素时，触发指定的第二个元素(leave)；
toggle(fn1,fn2,fn3,fn4...fnN)方法；用于模拟鼠标连续单机事件。第一次单击元素触发第一个元素，再次单击同一元素触发指定的第二个函数，入果有更多元素则依次触发。直到最后一个，随后的每次单击重复对这几个函数的轮番调用。
toggle()还有个作用是切换元素的课件状态可以替代show(),hide()方法，（个人不赞成使用，没有前者可读）
4.事件冒泡
如果一个元素嵌套在另外一个元素里并且都绑定了click事件，单击后，会按照DOM层次像水泡一样不断向上直至顶端。
函数中使用事件对象只需要为函数添加一个参数代码如下
$("element").bind("click",function(event){//...});单击element元素,事件对象就被创建了，且事件对象只有事件处理函数能访问到，处理完毕后就被销毁。//事件对象
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。用stopPropagation()
只需在函数最后用event.stopPropagation();停止事件冒泡即可，也可以用return false代替//停止事件冒泡
在jquery中用preventDefault()方法阻止默认元素行为。例如表单提交。也可以用return false代替
5.事件对象属性
(1)event.type该方法用于获取事件的类型。
$("a").click(function(event){
alert(event.type)；//获取事件类型 return false;//阻止链接跳转}）以上代码运行后输出"click"
(2)event.preventDefault jquery进行封装可兼容各种浏览器，而javascript此方法在IE浏览器中无效
(3)event.stopPropagation 与(2)相同
(4)event.target用于获取到触发事件的元素。
$("a[href='http://google.com']").click(function(event)){var tg=event.target;//获取事件对象
alert(tg.href);return false;} 输出"http://google.com"
(5)event.relatedTarget
(6)event.pageX和event.pageY该方法的作用是获取到光标相对于页面的x坐标和y坐标。
(7)event.which该方法的作用是在鼠标单击事件中获取到鼠标的左中右键，在键盘事件中获取键盘的按键。
(8)event.metaKey为键盘事件中获取<ctrl>按键
6.移出事件
unbind([type],[data])第一个是事件类型，第二个是将要移除的函数
a.如果没有参数则删除所有绑定的事件；b.如果提供了事件类型作为参数，则只删除该类型的绑定事件;c.如果在绑定时传递的处理函数作为第二个参数，则只删除这个特定的事件处理函数
one(type,[data],fn)方法为元素绑定处理函数，处理函数触发一次后立即被删除。只要第一次的单击处理函数执行，之后的单击无效
7.模拟操作 $("$btn").trigger("click")用户进入页面后触发click事件，简化语法$("$#btn").click()
trigger不仅能够支持触发浏览器支持的具有相同名称的事件，也可以触发自定义名称事件
传递数据
执行默认操作 如果只想触发绑定的事件，不想执行浏览器的默认操作，可以用triggerHandler()方法如$("input").triggerHandler("focus") 此操作触发input元素上绑定的特定事件，同时取消对此事件的默认操作，即值触发事件。不得到焦点
8.其他用法a.绑定多个事件类型b.添加事件命名空间c.相同事件名称，不同命名空间执行方法
二.jquery中的动画
1.show()和hide()
此两种类容控制内容显示隐藏。注意：hide()操作第一步记住display当前值block或inline等，第二部把值改为none；做jquery动画要求在标准模式下；可以为这两个函数设置一个参数，fast:200;normal:400;slow:600;或者单位为毫秒的数字；不过会慢慢增大或减少内容高度宽度及不透明度。
2.fadeIn()和fadeOut()此两方法只改变元素的不透明度，fadeOut在指定的一段时间内降低元素的不透明度，直到元素完全消失fadeIn()则相反
3.slideUp()和slideDown()只改变高度，如果一个元素的display属性为none ，使用slideDown()元素将由上至下延伸显示，slideUp()相反,由下至上隐藏。动画都可以指定三种参数slow,normal,fast，时间分别是0.6,0.4,0.2，秒，使用速度关键字要加引号，如果是数字就不需
4.自定义动画方法animate()
语法animate(params,speed,callback);
params:一个包含样式属性及值得映射，如{property1:"value"，property2:"value2"...}；speed：速度参数，可选；callback:在动画完成时执行的函数，可选。
a.自定义简单动画
为了能更改元素的left ,top等样式属性，position样式设置为relative或者absolute
例如设置为relative时$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);//加入animate()方法，使元素3秒内向右移动500像素。
});
b.累加、累减动画500px前加上+=或者-=
c.多重动画
例:$("#myImg").click(function(){
$(this).animate({left:"500px",height:"200px"},3000);
});
});
按顺序执行多个动画，只需要把代码拆开然后按顺序写
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);因为animate是对同一个jQuery对象操作，所以也可以改为链式写法$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
4.综合动画
5.动画回调函数
如果想在最后一步改变元素样式并不能得到预期效果，css()方法会在执行动画的时候就开始执行，因为css()方法并不会加入动画队列中，使用回调函数callback对非动画方法实现排队。只要把css()方法卸载最后一个动画的回调函数里。
callback回调函数适用于所有jquery动画效果方法，$("#element").slideDown("normal",function(){//效果完成后做其他事}）；
6.停止动画和判断是否处于动画状态
a.停止元素动画
如果需要在某处停止动画，需要使用stop()方法，stop()方法的语法结构为：stop([clearQueue],[gotoEnd]);参数都为可选，为boolean值，第一个代表是否要清空未执行完的动画队列，第二个代表是否直接将正在执行的动画跳转到末状态。
直接使用stop()方法，会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。
stop(true)对多个动画的组合，会在停止第一个动画后，后续未执行的动画队列也都将清空。
后一个动画需要基于前一个动画的末状态时可以通过stop(false,true)使得停止当前动画并直接到达当前动画的末状态。
也可以两者结合起来使用stop(true,true)，即停止当前动画并直接到达末状态，并清空队列。
b.判断元素是否处于动画状态
if(!$(element).is(":animated")){//判断元素是否处于动画状态//入股偶没有则添加新动画}
c.延迟动画
可以使用delay()方法对动画进行延迟操作，在animate(0方法后加.delay(1000)
4.其他4个专门用于交互的动画方法
toggle(),slideToggle,fadeTo(),fadeToggle()
