jQuery中的事件和动画
jquery中的事件
- 加载DOM
两者等价但有细微区别
$(document).ready(function(){//编写代码}) 在DOM完全就绪时就可以被调用。可重复使用
简写 $(function(){//...｝) 或者 $().ready(function(){//...})
$(window).load(function(){//编写代码}) 是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。会自动覆盖。
- 事件绑定
bind(type[.data].fn); 调用格式
type事件类型参数：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定义事件
data:可选参数 ：作为event.data属性值传递给事件对象的额外数据对象
fn参数：用来绑定的处理函数
- 合成事件
1.hover()方法 用于模拟光标悬停事件，代替bind("mouseenter")和bind("mouseleave")
$("selector").hover(enter,leave)
2..toggle()方法 用于模拟鼠标连续点击事件，特殊用法：切换元素可见状态
$("selector").toggle(fn1,fn2,...,fnN)
3.高亮样式
.highlight{background:#ff3300;}
- 事件冒泡
事件对象 ： $("element").bind("click",function(event){//event:事件对象...})
当单击element元素时，事件对象被创建，这个对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁了。
停止事件冒泡：event.stopPropagation()
阻止默认行为：event.preventDefault()
同时对事件对象停止冒泡和默认行为：return false；
- 事件对象的属性
even.type 获取事件类型
event.stopPropagation() 停止事件冒泡
event.preventDefault() 阻止默认行为
even.target 获取到触发事件的元素
event.relatedTarget 访问事件相关元素
event.pageX / event.pageY 获取光标相对于页面的x坐标和y坐标
event.which 在鼠标单击事件中获取鼠标的左、中、右键；在键盘事件中获取键盘的按键（返回值1=鼠标左键；2=鼠标中键；3=鼠标右键）
event.metaKey 键盘事件中获取<ctrl>按键
- 移除事件
1.unbind()方法 $("selector").unbind(type.[data])
type 事件类型
data 要移除的函数
a）如果没有参数，则删除所有绑定的事件
b）如果提供了事件类型参数，则只删除该类型的绑定事件
c）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除
2.one()方法 $("selector").one(type,[data].fn)
当处理函数触发一次后，立即被删除。
- 模拟操作
1. 常用模拟 $("#btn").trigger("click"); 当页面装载完毕后，就会立刻输出想要的效果
2.触发自定义事件 $("#btn").trigger(“myClick”)
3.传递数据 $("#btn").trigger(type，[data])
- 其他用法
1.绑定多个事件类型 ("selector").bind("type1 type2",function(){//...})
2.添加事件命名空间 $("selector").bind("type.命名空间",function(){//...})
3.匹配所有不包含在命名空间内的click方法 $("selector").trigger("type!")
jQuery中的动画
- show()方法和hide()方法
$("selector").show() $("selector").hide()
1.没有参数时等同于通过设置display的样式
2.传入参数后，.show()和.hide()方法同时动画改变元素的width,height和透明属性
3.传入参数控制显隐速度，单位毫秒，如.show(600)，也可传入fast,normal,slow，fast为200毫秒，normal为400毫秒，slow为600毫秒）
- fadeIn()方法和fadeOut()方法
$("selector").fadeIn() $("selector").fadeOut()
只改变元素的不透明度
- slideUp()方法和sliDown()方法
$("selector").slideUp() $("selector").slideDown()
只改变元素高度
- 自定义动画方法animate()
$("selector").animate(params,speed,callback);
a）params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
b）speed:速度参数，可选
c）callback:在动画完成时执行的参数（即回调函数），可选
- 动画回调函数
因css()方法不会加入动画队列中，则会马上执行。如若要在动画最后改变selector的css，需要利用回调函数，回调函数适用于jQuery所有的动画效果方法。
- 停止动画和判断是否处于动画状态
1.停止元素的动画 结束当前动画，如队列中存在下一个动画则立即执行下一个动画
$("selector").stop([clearQueue][,gotoEnd])
clearQueue参数为Boolean值（true or false），是否清空当前元素接下来尚未执行完的动画队列
gotoEnd参数为Boolean值（true or false），是否将正在执行的动画直接到达末状态
2.判断元素是否处于动画状态
if(!$("element").is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}
- 其他动画方法
toggle(speed,[callback]); 切换元素的可见状态，如元素隐藏则切换为可见，反之亦然
slideToggle(speed,[callback]); 通过高度变化来切换元素的可见性
fadeTo(speed,opacity,[callback]) 把元素的不透明度以渐进方式调整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度
- 动画方法概括
toggle() 用来代替hide()和show()
slideToggle() 用来代替slideUp()和slideDown()
animate() 可代替所有动画方法