jquery中的事件和动画
jquery中的事件和动画
1、jquery的事件
$(document).ready() 与 javascript中的 window.onload() 的对比；
简写成: $(function(){}); $() <==>$(document)
绑定事件 bind(type,[,data],fn)
第一个参数是类型；如:click...
第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象；
第三个参数是用来绑定的处理函数；
简写： $(".hello").bind("click",function(e){}); <====> $(".hello").click(function(){});
合成事件 hover(enter,leave)
当鼠标移动到元素上时，触发第一个函数；当鼠标离开元素时，触发第二个函数；
合成事件 toggle(fn1,fn2,fn3.....fnN)
当第一次单击时触发第一个函数，第二次时触发第二个函数.......依次循环
toggle() 还可以切换元素的可见状态
事件冒泡
例如：
Html代码 
- <html>
- <body>
- <div>
- <span>
- </span>
- </div>
- </body>
- </html>
- 给body、div、span 都绑定一个click事件。
如果单击 span 元素后。。。span、div、body 的click 事件都会被执行； 这就叫事件冒泡 （从里往外）
1、停止事件冒泡 event.stopPropagation() <====> return false;
2、阻止默认行为 如submit的提交行为；超链接的跳转行为等
event.preventDefualt() <====> return false;
event.type() 获取事件类型。
event.target() 获取触发事件的元素。
event.pageX() 和 event.pageY() 获取到光标相当于页面的X、Y坐标。
event.which() 在鼠标单击事件中获取到鼠标的左、中、右键；以及键盘事件中获取键盘的按键。
event.metaKey() 在键盘事件中获取<ctrl>按键。
event.originalEvent() 指向原始的事件对象。
模拟事件操作
1、trigger(type,[,data])
Js代码
- $(".btn").trigger("click");//当加载完成时，就执行class="btn" 的click事件
- //等价于 $(".btn").click();
2、 trigger() 与 triggerHandler() 的区别
Js代码
- $("input").trigger("myclick");//执行完myclick事件后，聚焦到input文本框
- $("input").triggerHandler("myclick");//执行完myclick事件后，不会聚焦input文本框
动画
1、show() 和 hide() 不带参数表示 立即显示或隐藏元素
JQUERY 的动画要求在标准模式 下进行，否则有可能发生抖动；标准模式 即是要求文件头部包含如下的DTD定义：
Html代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
默认值： fast = 200ms normal = 400ms slow = 600ms
2、fadeIn() 和 fadeOut() 只改变元素的 不透明度 ，不会改变元素的高度和宽度
3、slideUp() 和 slideDwon() 只改变元素的高度。
4、自定义动画 animate()
5、停止动画 stop()
6、其它的动画方法
toggle(speed,[callback]) 切换元素的可见状态
slideToggle(speed,[callback]) 通过高度的变化，来切换元素的可见性
fadeTo(speed,opacity,[callback]) 以渐进的方式来改变元素的不透明度，不改变高度和宽度
